ランウェイフルスタックエンジニアで上
問題を解く
私は最近VUEH5プロジェクトの開発に取り組んでいます。プロジェクトはmit-uiフレームワークに基づいています。Mint-ui自体は確認コンポーネントを提供しますが、内部の効果はUIによって提供されるデザインレンダリングと一致しません。彼のスタイルに基づいて変更しようとすると、見つかりません。目的の効果を実現するために、インターネット上で多くのコンポーネントを見つけましたが、複数のポップが必要なページがあるため、期待した効果が得られませんでした。 -ウィンドウが表示され、キャンセルおよび確認イベントの処理が見つからないため、手動でパッケージ化しました。コンポーネント、次にyl-confirmコンポーネントのカプセル化を実現する方法。
エフェクト画像
コンポーネント機能
- カスタムコンテンツをサポートする
- 確認コールバックをサポート
- キャンセルコールバックをサポート
コンポーネントのソースコード
ファイル名はyl-confirm.vueです
<template>
<div class="content-pop" v-if="bool_show">
<div class="result" v-html="content"></div>
<div class="bottom">
<div class="cancel" @click="cancel">取消</div>
<div class="confirm" @click="confirm">确定</div>
</div>
</div>
</template>
<script>
export default {
name: 'msgConfirmPro',
data() {
return {
bool_show: false,
content: '',
cancelBack:undefined,
confirmBack:undefined,
}
},
methods: {
// 打开弹窗
show(content,confirm,cancel) {
if(confirm){
this.confirmBack = confirm;
}
if(cancel){
this.cancelBack = cancel;
}
this.content = content;
this.bool_show = true;
},
cancel() {
this.bool_show = false;
if(this.cancelBack){
this.cancelBack();
}
},
confirm() {
this.bool_show = false;
if(this.confirmBack){
this.confirmBack();
}
}
}
};
</script>
<style scoped="">
.content-pop {
width: 250px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* padding: 0.04rem 0 0 0; */
box-sizing: border-box;
background: #ffffff;
height: 149px;
border-radius: 24px;
}
.result {
overflow: auto;
padding: 20px 30px;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
/* bottom: 87px; */
font-size: 16px;
position: absolute;
text-align: center;
color: #333;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.content-pop .bottom {
font-size: 16px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
display: flex;
justify-content: space-between;
border-top: 1px solid #f5f5f5;
}
.content-pop .bottom .cancel {
color: #666666;
width: 50%;
height: 100%;
line-height: 48px;
text-align: center;
border-right: 01px solid #f5f5f5;
}
.content-pop .bottom .confirm {
color: #2283e2;
width: 50%;
height: 100%;
text-align: center;
line-height: 48px;
}
.content-pop .title {
box-sizing: border-box;
padding: 40px 0;
width: 100%;
margin: 0 auto;
text-align: center;
color: #333;
border-bottom: 0.003rem solid #f5f5f5;
}
</style>
使い方
<template>
<div id="app" style="background-color: #ff0000;height: 100vh;">
<div @click="show()">点击出现弹窗</div>
<ylConfirm ref="MSGCONFIRMPRO"></ylConfirm>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import ylConfirm from './components/yl-confirm.vue'
export default {
name: 'app',
components: {
HelloWorld,ylConfirm
},methods:{
show() {
this.$refs.MSGCONFIRMPRO.show('我是弹窗里面的内容,我可以随便定义哦',
() => {
// 确定的回调
alert("点击了确认");
},
() => {
// 取消的回调
alert("点击了取消");
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>