Vue自定义弹窗组件
分类专栏: Javascript&
简介 自定义弹框玩玩,自己DIY
<p class="ql-align-center"><strong>第一步</strong></p><p><template></p><p> <div v-show="isShow"></p><p> <div class="alert"></p><p> <div class="flex">{{msg}}</div></p><p> <div v-if="type === 'alert'"></p><p> <div class="btnCommon success" @click="close()">确定</div></p><p> </div></p><p> <div v-else class="space-round"></p><p> <div class="btnCommon cancel" @click="cancelEvent()">取消</div></p><p> <div class="btnCommon success" @click="successEvent()">确定</div></p><p> </div></p><p> </div></p><p> <div class="mask" @click="closeMask"></div></p><p> </div></p><p></template></p><p><br></p><p><script></p><p>export default {</p><p> name: "alert",</p><p> props: {</p><p> type: {</p><p> type: String,</p><p> default: 'alert'</p><p> },</p><p> msg: {</p><p> type: String,</p><p> default: ''</p><p> },</p><p> isShow: {</p><p> type: Boolean,</p><p> default: false</p><p> },</p><p> success: {</p><p> type: Function,</p><p> default: () => {</p><p> console.log('点击了success');</p><p> }</p><p> },</p><p> cancel: {</p><p> type: Function,</p><p> default: () => {</p><p> console.log('点击了cancel');</p><p> }</p><p> },</p><p> },</p><p> methods: {</p><p> close () {</p><p> this.isShow = false;</p><p> },</p><p> closeMask () {</p><p> if (this.type === 'alert') this.close();</p><p> },</p><p> cancelEvent () {</p><p> this.cancel();</p><p> this.close();</p><p> },</p><p> successEvent () {</p><p> this.success();</p><p> this.close();</p><p> }</p><p> }</p><p>};</p><p></script></p><p><br></p><p><style lang="scss" scoped></p><p> $btn-main: #009688;</p><p> $btn-dark: darken($btn-main, 5%);</p><p> .alert {</p><p> width: 300px;</p><p> height: 150px;</p><p> position: fixed;</p><p> background: #fff;</p><p> border-radius: 6px;</p><p> left: calc(50% - 150px);</p><p> top: calc(50% - 75px);</p><p> padding: 20px 10px;</p><p> box-shadow: 0 5px 8px rgba(0, 0, 0, .05);</p><p> z-index: 99;</p><p> display: flex;</p><p> flex-flow: column nowrap;</p><p> justify-content: center;</p><p> align-items: center;</p><p> }</p><p> .flex {</p><p> flex: 1;</p><p> display: flex;</p><p> justify-content: center;</p><p> align-items: center;</p><p> }</p><p> .space-round {</p><p> display: flex;</p><p> flex-flow: row wrap;</p><p> justify-content: space-around;</p><p> align-items: center;</p><p> width: 100%;</p><p> padding: 0 10px;</p><p> }</p><p> .btnCommon {</p><p> width: 105px;</p><p> height: 32px;</p><p> text-align: center;</p><p> line-height: 32px;</p><p> border-radius: 6px;</p><p> &.success {</p><p> background: $btn-main;</p><p> color: #fff;</p><p> &:hover {</p><p> background: $btn-dark;</p><p> cursor: pointer;</p><p> }</p><p> }</p><p> &.cancel {</p><p> background: #ededed;</p><p> color: #333;</p><p> }</p><p> }</p><p> .mask {</p><p> position: fixed;</p><p> width: 100%;</p><p> height: 100%;</p><p> background: rgba(0, 0, 0, .4);</p><p> left: 0;</p><p> top: 0;</p><p> overflow: hidden;</p><p> z-index: 9;</p><p> }</p><p></style></p><p><br></p><p class="ql-align-center"><strong>第二步</strong></p><p class="ql-align-justify"><strong>import AlertComponent from './alert.vue';</strong></p><p class="ql-align-justify"><strong>const Alert = {};</strong></p><p class="ql-align-justify"><strong>/** 2020-2-18 0018</strong></p><p class="ql-align-justify"><strong> *作者: 八仔</strong></p><p class="ql-align-justify"><strong> *功能: 公共弹窗插件实例方法</strong></p><p class="ql-align-justify"><strong> *参数:</strong></p><p class="ql-align-justify"><strong> */</strong></p><p class="ql-align-justify"><strong>Alert.install = Vue => {</strong></p><p class="ql-align-justify"><strong> const AlertConstructor = Vue.extend(AlertComponent);</strong></p><p class="ql-align-justify"><strong> const instance = new AlertConstructor();</strong></p><p class="ql-align-justify"><strong> instance.$mount(document.createElement('div'));</strong></p><p class="ql-align-justify"><strong> document.body.appendChild(instance.$el);</strong></p><p class="ql-align-justify"><strong> // 4. 添加实例方法</strong></p><p class="ql-align-justify"><strong> Vue.prototype.$alert = (msg) => {</strong></p><p class="ql-align-justify"><strong> // 逻辑...</strong></p><p class="ql-align-justify"><strong> instance.type = 'alert';</strong></p><p class="ql-align-justify"><strong> instance.msg = msg;</strong></p><p class="ql-align-justify"><strong> instance.isShow = true;</strong></p><p class="ql-align-justify"><strong> };</strong></p><p class="ql-align-justify"><strong> Vue.prototype.$confirm = (msg, success, cancel) => {</strong></p><p class="ql-align-justify"><strong> // 逻辑...</strong></p><p class="ql-align-justify"><strong> instance.type = 'confirm';</strong></p><p class="ql-align-justify"><strong> instance.msg = msg;</strong></p><p class="ql-align-justify"><strong> instance.isShow = true;</strong></p><p class="ql-align-justify"><strong> if (typeof success !== 'undefined') {</strong></p><p class="ql-align-justify"><strong> instance.success = success;</strong></p><p class="ql-align-justify"><strong> }</strong></p><p class="ql-align-justify"><strong> if (typeof cancel !== 'undefined') {</strong></p><p class="ql-align-justify"><strong> instance.cancel = cancel;</strong></p><p class="ql-align-justify"><strong> }</strong></p><p class="ql-align-justify"><strong> };</strong></p><p class="ql-align-justify"><strong>};</strong></p><p class="ql-align-justify"><strong>export default Alert;</strong></p><p class="ql-align-justify"><br></p><p class="ql-align-center"><strong>第三步</strong></p><p class="ql-align-justify"><strong>import Alert from './components/modules/alert';</strong></p><p class="ql-align-justify"><br></p><p class="ql-align-justify"><strong>Vue.use(Alert);</strong></p><p><br></p>
分享到:
转载:
喜欢 0
收藏
上一篇:
NoSQL数据库的意义
暂无评论信息
- 相关文章
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据