微信小程序实现漂亮的弹窗效果,详解vue中组件参数

我们来聊一下vue中的组件参数.

最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西……
场面一度十分尴尬
可是得做啊,要不然产品大姐又要暴走了……
好吧,来研究一下模态对话框的性质自己DIY吧~

前言 上次写了一个Object.defineProperty()
不详解,文末说要写用它来写个双向绑定。说话算话,说来就来

1.vue中组件参数

实现思路

前文链接 Object.defineProperty()
不详解

我们可以为组件的 prop
指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue
会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

模态对话框之所以被叫做“模态”,就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。
那么这样一来,我们的思路就很明确了:

先看最后效果

我们来看下最为简单和常见的vue代码

1.
构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片点击事件;

图片 1

<div id="root">
      <item content="hello"></item>
    </div>
    <script>
      Vue.component("item",{
        props:["content"],
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>
  1. 构建一个对话框,在需要时弹出即可(弹出同时触发蒙层)。

model演示.gif

这是一个最简单的创建组件和父组件向子组件的例子,但是我们在是否可以考虑一下,如果我希望父组件向子组件传递参数的时候是个数字类型呢?又或者是布尔类型呢?所以我们在这里就必须要对父组件传递过来的参数做一个校验。

示例代码

什么是双向绑定?

<div id="root">
      <item content="hello"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:String
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

.wxml:

1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model
=> view)

我们对第一个例子的代码进行了修改,我们把子组件中的props属性,改为一种对象的形式,而且我们也约束了父组件传递过来的content为String类型,但是还会有这样的一种情况出现,请看下面的代码:

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg" wx:if="{{showModal}}">
  <image src="/figures/logo-smile.png"/>
  <text>欢迎来到模态对话框~</text>
  <button bindtap="go">点我可以关掉对话框</button>
</view>

<button bindtap="submit">点我弹窗</button>

2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值
,即视图到模型(view => model)

<div id="root">
      <item content="1"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:String
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

.wxss:

我们怎么知道对象的属性变了?

我们改变了父组件中content的值等于1,那么我们就很自然的把content理解为数字类型,那么页面就会出现报错的提示.但是我们打开页面后,并没有浏览器报错。这又是为什么呢?

.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 9000;
  opacity: 0.7;
}

.modalDlg{
  width: 580rpx;
  height: 620rpx;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  margin: -370rpx 85rpx;
  background-color: #fff;
  border-radius: 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

上文说到,Object.defineProperty 设置对象属性的描述字段里面有两个属性 set (设置属性时被调用)和get(获取属性时被调用),只说不练,你再讲什么?眼见为实好吗?OK
,上代码

在vue中,默认传递的值都是字符串,如果你想要传递一个数字,那么必须在content前面添加一个:

.js:

var user = {};
var defaultName = "狂奔的蜗牛";
Object.defineProperty(user,"name",{
  get:function(){
    console.log("你是不是来获取值啦");
    return defaultName;
  },
  set:function(value){
    console.log("你是不是来设置值啦");
    defaultName = value;
  }
})

console.log(user.name);
user.name = "狂奔的萝卜";
console.log(user.name);

发表评论

电子邮件地址不会被公开。 必填项已用*标注