LuLu UI Edge主题使用教程-在Vue中使用

Edge 主题对 Vue 进行了完全的支持，所有组件均可以使用，这里详细介绍下在 Vue 中（以 Vue 3.1.5 版本示意）使用 LuLu UI。

使用template元素

Vue 支持常规的 HTML 元素作为渲染的一部分，例如下面这样：

<div id="event-handling">
  <p>{{ message }}</p>
  <select is="ui-select" @change="showMessage">
      <option value="青龙">青龙</option>
      <option value="玄武">玄武</option>
  </select>
</div>

此时下面的 Vue 代码理论上是可以实现完成正常的效果的。

const EventHandling = {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    showMessage(e) {
      this.message = e.target.value
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')

但是在 LuLu UI 中，会有问题，因为会存在 <select> 元素二次渲染的问题。

当页面载入完毕，此时 <select> 是一个符合 LuLu UI 规则的 UI 组件，则会执行组件渲染，当再次执行 Vue 的 DOM 渲染，<select> 元素又会重新被赋予到文档中，会触发第二次的组件渲染。

所以，在 Vue 中使用 Edge 主题，需要将需要组件元素放在 <template> 元素中，这样，LuLu 的 UI 组件只会在 Vue 完成 DOM 绘制后进行唯一一次的渲染，功能就完全正常了。

代码示意：

<div id="event-handling">
<template v-if="1">
  <p>{{ message }}</p>
  <select is="ui-select" @change="showMessage">
      <option value="青龙">青龙</option>
      <option value="玄武">玄武</option>
  </select>
</template>
</div>

实时渲染效果如下：

不过，使用 <template> 元素并不是强制的，而是建议，对于绝大多数 UI 组件，即使两次渲染，对于功能而言也是没有任何影响的。

静态组件的使用

由于静态组件是基于 CSS 渲染，因此，静态组件当做原生的标准 HTML 元素在 Vue 中使用就可以了，无需专门放在 <template> 元素中。例如：

<div id="static-components">
    <button type="primary" is="ui-button">主按钮</button>
    <button class="ui-button" data-type="primary">主按钮</button>
    <p><input is="ui-input"> <input class="ui-input"></p>
    <input type="checkbox" is="ui-checkbox"> <input type="radio" is="ui-radio">
    <p><textarea is="ui-textarea"></textarea> <textarea class="ui-textarea"></textarea></p>
    <input type="checkbox" is="ui-switch"> <progress is="ui-progress" value=".5"></progress>
</div>

Vue.createApp({}).mount('#static-components')

实时效果如下所示：

内置自定义元素使用

内置自定义元素的 is 属性在 Vue 中并无特殊含义，因此可以无障碍使用，因此，在 Vue 中，所有的内置自定义元素组件都是可以无障碍使用的，例如：

<div id="buildin-components">
    <template v-if="1">
        <input type="range" is="ui-range" data-tips="${value}%"><br>
        <input type="color" is="ui-color" value="#ff0000"><br>
        <input type="date" is="ui-datetime"><br>
        <!-- datalist元素需要放在前面 -->
        <datalist id="dp">
            <option value="蔡伦">
            <option value="李雨晴">
            <option value="彭玉乐">
        </datalist>
        <input class="ui-input" list="dp" is="ui-datalist">
    </template>
</div>

Vue.createApp({}).mount('#buildin-components')

实时效果如下所示：

自定义元素使用

类似 <xx-xx> 的自定义元素在 Vue 中有着特殊含义，通常代表和 Vue 语法集成的 Web 组件，而 LuLu UI 的 Web 组件不合任何第三方框架勾勾搭搭，因此，LuLu UI 中的自定义元素组件在 Vue 中会发生警告，需要大家配置下。

const app = Vue.createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ui-')
app.mount('#app')

也可以在 Vite 或 Vue CLI 中配置，详见官方文档。

如果因为客观原因，无法配置或者懒得配置，也是可以的，Edge 主题支持多种语法，我们可以使用自定义属性实现一样的组件效果。

使用示意：

<div id="attr-components">
    <template v-if="1">                    
        <div is-pagination data-total="200"></div>
        <a href="javascript:" is-drop="img0">Drop点击我</a>
        <a href="javascript:" is-tips title="注销">黑提示</a>
        <form is-validate>
            <input type="search" class="ui-input" required>
            <button type="primary" class="ui-button">搜索</button>
        </form>
        <div class="ui-tab-tabs">
            <button data-target="p1" name="tab" class="ui-tab-tab" is-tab open>选项卡1</button>
            <button data-target="p2" name="tab" class="ui-tab-tab" is-tab>选项卡2</button>
        </div>
        <div id="p1" class="ui-tab-content active">...</div>
        <div id="p2" class="ui-tab-content">...</div>
    </template>
</div>

Vue.createApp({}).mount('#attr-components')

实时效果如下所示：

事件的处理

Edge 主题的自定义事件机制是可以和 Vue 的事件执行无缝对接，这里列举两个简单的例子示意下：

1. 分页选择后

这里示意在分页进行选择后显示当前选择的分页数目：

<div id="pageApp">
    <template v-if="1">
        <p>当前选择的分页是：{{ current }}</p>
        <div is-pagination data-total="200" :data-current="current" @change="setCurrent"></div>
    </template>
</div>

// 分页事件
const PageHandling = {
  data() {
    return {
      current: 1
    }
  },
  methods: {
    setCurrent(e) {
      this.current = e.detail.current
    }
  }
}
Vue.createApp(PageHandling).mount('#pageApp')

实时效果如下所示：

2. 表单验证成功后

表单验证全部通过后会触发自动的 valid 事件，我们可以使用 @valid 语法进行捕获，代码示意：

<div id="formApp">
    <template v-if="1">
        <form is-validate @valid="setSuccess">
            <input type="search" class="ui-input" required>
            <button type="primary" class="ui-button">搜索</button>
        </form>
    </template>
</div>

// 表单事件
const FormHandling = {
  methods: {
    setSuccess() {
      new Dialog().alert('验证通过');
    }
  }
}
Vue.createApp(FormHandling).mount('#formApp')

实时效果如下所示，输入内容，点击搜索按钮：

参数的传递

在 Vue 中，LuLu UI 的参数可以借助 HTML 属性或者 HTML 自定义属性传递，也可以借助生命周期函数传递。

属性传参比较简单，和非 Vue 环境使用区别不大，这里的两个示例主要演示借助生命周期函数设置参数。

1. 自定义出错提示信息

例如下面这个例子，改变搜索输入框内容为空的提示文字，可以这么处理：

<div id="formApp2">
    <template v-if="1">
        <form is-validate @connected="setValidInfo">
            <input type="search" class="ui-input" required>
            <button type="primary" class="ui-button">搜索</button>
        </form>
    </template>
</div>

// 表单处理2，参数传递
const FormHandling2 = {
  methods: {
    setValidInfo(e) {
      let eleSearch = e.target.querySelector('[type="search"]');
      if (eleSearch) {
        eleSearch.setCustomValidity({
            valueMissing: '主人，你忘记写东西了，喵呜~'
        });
      }
    }
  }
}
Vue.createApp(FormHandling2).mount('#formApp2')

实时效果如下所示，直接点击搜索按钮，看看提示信息是什么。

当 UI 组件完成定义和注册，会触发 connected 自定义事件，此时就可以安心传参。

2. 设置数据列表的数据

演示如何给内置自定义元素传递非 HTML 属性参数。

<div id="listApp">
    <template v-if="1">
        <input class="ui-input" results="5" is="ui-datalist" @connected="setListData">
    </template>                
</div>

// 传参
const ListHandle = {
  methods: {
    setListData(e) {
      e.target.params.data = [{
        value: '蔡伦',
        userid: 1
    }, ..., {
        value: '彭玉乐',
        userid: 7
    }];
    }
  }
}
Vue.createApp(ListHandle).mount('#listApp')

点击下面的输入框，即可以看到列表数据选择效果。

基本上，在 Vue 中使用 LuLu UI，这类非 HTML 属性参数都是在 connected 事件中进行设置。

在 Vue 框架中使用

LuLu UI 也支持在 Vue 开发框架中使用，使用方式和常规的 UI 组件库类似，分为安装和调用两步。

npm install lu2

<style src="lu2/theme/edge/css/common/ui/Dialog.css"></style>

<script>
    import Dialog from 'lu2/theme/edge/js/common/ui/Dialog'
</script>

接下来的使用就按照各个 UI 组件对应的文档提示和本教程进行就好了。

本页贡献者：

zhangxinxu