DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/demo/component/modal.vue

<template>
  <view>
    <l-title>普通弹出窗口：</l-title>
    <view class="padding">
      <l-button @click="normal = true" color="green" shadow>显示</l-button>
      <l-modal v-model="normal" title="模态框标题">我是模态框内容</l-modal>
    </view>
    <l-demo-description>
      弹出窗口使用 l-modal 标签，将弹出窗口显示与否绑定为 v-model ，属性 title 可以设置弹出窗口的标题；
      标签内的默认插槽内容成为弹出窗口的内容，在名为 title 的插槽中的内容将渲染为标题； 弹出窗口关闭时会触发 close 事件
    </l-demo-description>

    <l-title>底部弹出窗口：</l-title>
    <view class="padding">
      <l-button @click="bottom = true" color="green" shadow>显示</l-button>
      <l-modal v-model="bottom" type="bottom" title="底部模态框标题">我是底部模态框内容</l-modal>
    </view>
    <l-demo-description>
      给 l-modal 标签添加属性 type="bottom" 即设为底部弹出窗口； 
      底部窗口有一个名为 action 的插槽，该插槽的内容将渲染到底部弹出窗口的按钮区
    </l-demo-description>

    <l-title>对话弹出窗口：</l-title>
    <view class="padding">
      <l-button @click="confirm = true" color="green" shadow>显示</l-button>
      <l-tag v-if="confirmValue" color="blue" class="margin-left-sm" capsule round>
        <text slot="icon">选择了</text>
        {{ confirmValue }}
      </l-tag>
      <l-modal
        v-model="confirm"
        @ok="confirmValue = '确认'"
        @cancel="confirmValue = '取消'"
        type="confirm"
        title="对话窗口标题"
      >
        我是对话窗口的内容
      </l-modal>
    </view>
    <l-demo-description>
      给 l-modal 标签添加属性 type="confirm" 即可设为对话弹出窗口，对话弹出窗口有确认和取消按钮；
      点击确认按钮将触发 ok 事件，点击取消按钮将触发 cancel 事件
    </l-demo-description>

    <l-title>图片弹出窗口：</l-title>
    <view class="padding">
      <l-button @click="img = true" color="green" shadow>显示</l-button>
      <l-modal v-model="img" type="img" img="https://img.learun.cn/wxcx/pic.jpg" />
    </view>
    <l-demo-description>给 l-modal 标签添加属性 type="img" 即可设为图片弹出窗口，设置属性 img 来设置图片的地址</l-demo-description>

    <l-title>单选弹出窗口：</l-title>
    <view class="padding">
      <l-button @click="radio = true" color="green" shadow>显示</l-button>
      <l-tag color="blue" class="margin-left-sm" capsule round>
        <text slot="icon">选择了</text>
        {{ radioValue }}
      </l-tag>
      <l-modal v-model="radio" @radioChange="radioChange" :radio="radioValue" :range="['选项1', '选项2', '选项3']" type="radio" />
    </view>
    <l-demo-description>
      给 l-modal 标签添加属性 type="radio" 即可设为单选弹出窗口； 
      单选弹出窗口需要设置属性 range 表示单选项，设置属性 radio 表示当前选中的项； 
      单选弹出窗口有事件 radioChange、radioIndex 表示单选项、Index 发生改变
    </l-demo-description>

    <l-title>多选弹出窗口：</l-title>
    <view class="padding">
      <l-button @click="checkbox = true" color="green" shadow>显示</l-button>
      <l-tag color="blue" class="margin-left-sm" capsule>
        <text slot="icon">选择了</text>
        {{ checkboxValue.join('，') }}
      </l-tag>
      <l-modal
        v-model="checkbox"
        @checkboxChange="checkboxChange"
        :checkbox="checkboxValue"
        :range="['选项1', '选项2', '选项3', '选项4']"
        type="checkbox"
      />
    </view>
    <l-demo-description>
      给 l-modal 标签设置属性 type="checkbox" 即可设为多选弹出窗口；
      多选弹出窗口需要设置属性 range 表示多选项，设置属性 checkbox 表示当前选中的项；
      多选弹出窗口有事件 checkboxChange、checkboxIndex 表示选项值、Index 发生改变，另有 ok、cancel 事件表示点击了确定、取消
    </l-demo-description>
  </view>
</template>

<script>
export default {
  data() {
    return {
      normal: false,
      bottom: false,
      confirm: false,
      img: false,
      radio: false,
      checkbox: false,

      confirmValue: null,
      radioValue: '选项1',
      checkboxValue: ['选项1']
    }
  },

  methods: {
    radioChange(newVal){
      this.radioValue = newVal
    },
    
    checkboxChange(newVal) {
      this.checkboxValue = newVal
    }
  }
}
</script>