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">打開彈窗</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沒在 // template中使用但是一定要返回,否則會出問題 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沒在 template中使用但是一定要返回,否則會出問題
有關(guān)其他ref的請點(diǎn)擊參考
vue3 setup中父組件通過Ref調(diào)用子組件的方法(實(shí)例代碼)
vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
到此這篇關(guān)于vue 遮罩和ref的使用,setup版和非setup版的文章就介紹到這了,更多相關(guān)vue 遮罩和ref使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
從零擼一個pc端vue的ui組件庫( 計數(shù)器組件 )
這篇文章主要介紹了pc端vue的ui組件庫的實(shí)現(xiàn)方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08一篇文章告訴你Vue3指令是如何實(shí)現(xiàn)的
在計算機(jī)技術(shù)中,指令是由指令集架構(gòu)定義的單個的CPU操作,在更廣泛的意義上,“指令”可以是任何可執(zhí)行程序的元素的表述,例如字節(jié)碼,下面這篇文章主要給大家介紹了關(guān)于Vue3指令是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-01-01基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
這是一個基于Vue2的簡易省市區(qū)縣三級聯(lián)動組件,可以控制只顯示省級或只顯示省市兩級,可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù),適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下2018-11-11