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数据库的意义
暂无评论信息
- 文章推荐
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据