vue?遮罩和ref的使用setup版和非setup版
1、創(chuàng)建conform.vue,其內(nèi)容如下:
<template> <div v-if="fade"> <div class="xtx-confirm" :class="{fade}"> <div class="wrapper" :class="{fade}"> <div class="header"> <h3>{{title}}</h3> <a @click="cancel" href="JavaScript:;" rel="external nofollow" >x</a> </div> <div class="body"> <i class="iconfont icon-warning"></i> <span>{{text}}</span> </div> <div class="footer"> <span @click="cancel" class="cancel">取消</span> <span @click="submit" class="submit">確認(rèn)</span> </div> </div> </div> </div> </template> <script > import { onMounted, ref, } from 'vue' export default { name: 'conform', props:{ title: { type: String, default: '溫馨提示' }, text: { type: String, default: '' }, }, setup(){ const fade = ref(false) const open = () => { fade.value = true } // 取消 const cancel = () => { fade.value = false } // 確認(rèn) const submit = () => { fade.value = false } return { fade, open, cancel, submit} } } </script> <style scoped lang="less"> .xtx-confirm { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 8888; background: rgba(0,0,0,0); &.fade { transition: all 0.4s; background: rgba(0,0,0,.5); } .wrapper { width: 400px; background: #fff; border-radius: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); opacity: 0; &.fade { transition: all 0.4s; transform: translate(-50%,-50%); opacity: 1; } .header,.footer { height: 50px; line-height: 50px; padding: 0 20px; } .body { padding: 20px 40px; font-size: 16px; .icon-warning { color: red; margin-right: 3px; font-size: 16px; } } .footer { text-align: right; cursor: pointer; .cancel{ margin-right: 20px; cursor: pointer; } .submit{ cursor: pointer; } } .header { position: relative; h3 { font-weight: normal; font-size: 18px; } a { position: absolute; right: 15px; top: 15px; font-size: 20px; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #999; &:hover { color: #666; } } } } } </style>
2、App.vue中的內(nèi)容如下:
<!--方式1--> <template> <button @click="show_open">打開(kāi)彈窗</button> <conform ref="conform_ref"></conform> </template> <script > import conform from "@/components/conform.vue"; import {ref} from "vue"; export default { name: 'App', components:{ conform}, setup(){ const conform_ref = ref(null) const show_open = ()=>{ conform_ref.value.open() } // 特別要注意這種方式,雖然conform_ref沒(méi)在 // template中使用但是一定要返回,否則會(huì)出問(wèn)題 return{conform_ref, show_open} } } </script> <!--方式二--> <!--<template>--> <!-- <button @click="validate_ref">主要按鈕</button>--> <!-- <conform ref="validate" ></conform>--> <!--</template>--> <!--<script setup>--> <!--import conform from './components/conform.vue'--> <!--import {ref} from "vue";--> <!--const validate = ref(null)--> <!--const validate_ref = ()=>{--> <!-- validate.value.open()--> <!-- console.log(validate.value)--> <!--}--> <!--</script>--> <!--<style scoped lang="less">--> <!--</style>-->
效果如下:
特別需要注意的是方式一這種方式,雖然conform_ref沒(méi)在 template中使用但是一定要返回,否則會(huì)出問(wèn)題
有關(guān)其他ref的請(qǐng)點(diǎn)擊參考
vue3 setup中父組件通過(guò)Ref調(diào)用子組件的方法(實(shí)例代碼)
vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
到此這篇關(guān)于vue 遮罩和ref的使用,setup版和非setup版的文章就介紹到這了,更多相關(guān)vue 遮罩和ref使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決el-date-picker日期選擇控件少一天的問(wèn)題
這篇文章主要介紹了解決el-date-picker日期選擇控件少一天的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10從零擼一個(gè)pc端vue的ui組件庫(kù)( 計(jì)數(shù)器組件 )
這篇文章主要介紹了pc端vue的ui組件庫(kù)的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08一篇文章告訴你Vue3指令是如何實(shí)現(xiàn)的
在計(jì)算機(jī)技術(shù)中,指令是由指令集架構(gòu)定義的單個(gè)的CPU操作,在更廣泛的意義上,“指令”可以是任何可執(zhí)行程序的元素的表述,例如字節(jié)碼,下面這篇文章主要給大家介紹了關(guān)于Vue3指令是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-01-01vue 解決循環(huán)引用組件報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇vue 解決循環(huán)引用組件報(bào)錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09基于Vue2實(shí)現(xiàn)簡(jiǎn)易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件效果
這是一個(gè)基于Vue2的簡(jiǎn)易省市區(qū)縣三級(jí)聯(lián)動(dòng)組件,可以控制只顯示省級(jí)或只顯示省市兩級(jí),可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱(chēng)數(shù)據(jù),適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下2018-11-11移動(dòng)端調(diào)試神器vConsole使用詳解
vConsole?是框架無(wú)關(guān)的,可以在?Vue、React?或其他任何框架中使用,今天通過(guò)本文給大家介紹移動(dòng)端調(diào)試神器vConsole使用,感興趣的朋友一起看看吧2022-04-04