整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Element-ui简单使用

Element-ui简单使用

么是Element-ui?

根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库

官网:https://element.eleme.cn/#/zh-CN

如何使用?

1、创建文件夹element-ui。

2、下载组件。

npm install vue #安装Vue
npm i element-ui -S #安装Element-ui

3、为了代码更加清爽,可以将主要依赖vue.min.js和element-ui包放入lib目录中,lib目录需手动创建。

4、搭建第一个UI界面入门程序。

<!DOCTYPE html>
<html>
?
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>
?
<body>
  <div id="app">
    <!-- 所有的el-开头的标签都是elementui的组件! -->
    <el-button @click="visible=true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>
?
<script>
  new Vue({
    el: '#app',
    data: function () {
      return { visible: false }
    }
  })
</script>
?
</html>

官网基本组件测试

1、容器,拿来即用即可。

2、图标,el内置了许多图标,使用icon="iconname"属性即可使用,也推荐使用https://fontawesome.dashgame.com/这个网站中的图标。

<el-button @click="visible=true" icon="el-icon-search">Button</el-button>

3、对于后台程序员来说,大部分情况下都是在对表单进行操作。el几乎内置了开发中会使用的所有表单组件。

前端怎么写?

对于一些后台开发人员来说,可能会存在开发一个项目不知道怎么开始第一步的问题,其原因大概是:

  • 没有清晰的界面定义。
  • 不会设计数据库。

对于第一个问题,Element-ui组件可以直接套用,我们平时可以多去看看其他网站如何设计,借鉴学习。

至于第二个问题,其实也是因为第一个问题没解决,当我们把前端写好之后,数据库的结构自然就出来了。解决了这两个问题,剩下的就是后台的CRUD了,这是我们最熟悉的部分。

编写前端的基本套路:

  • 见过足够多的组件,拼接组件,这样就形成了网页的基本形状。
  • 修改CSS即可。

设计多级下拉菜单的联动效果

如下图所示,现在要实现第一个下拉框选择不同的选项时,第二个下拉框中的下拉选项也要随之发生变化的效果,这时可以使用级联选择器(cascader)来实现。

<div class="block">
  <span class="demonstration">默认 click 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    @change="handleChange"></el-cascader>
</div>
<div class="block">
  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
</div>
?
<script>
  export default {
    data() {
      return {
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }
  }

所有的前端弹窗建议都使用layer组件来实现。

Access中,有多个组合框,每个组合框的的值受限于上一层组合框的值

即组合框的联动。如在组合框选择了一个省份后,下一层组合框智能筛选这个省份的市

设置方法:

一、建立基础表,这里我们建立3个表:省,市,县(区)这3个表

二、窗体设置

1、省设置

① 窗体设计图如下:创建3个组合框,分别命名为省,市,县。窗体保存为命名为“窗体12”

② 设置省的组合框的行来源:

SELECT 省.省编号, 省.省名 FROM 省;

同时设置组合框属性,列数为2,列宽为0;2

③ 设置组合框属性 更新后事件为:

Private Sub 省_AfterUpdate()
Me.市.Requery
Me.市=Null
Me.县=Null
End Sub

这里的代码主要是当选择省份后,自动刷新市,同时设置市和县为空

2、设置市

如上面同理,设置市的行来源为

SELECT 市.市编号, 市.市名 FROM 市
WHERE (((市.省编号)=[forms]![窗体12]![省]));

这里同时要记得设置 列数和列宽。

市组合框的更新后事件为:

Private Sub 市_AfterUpdate()
Me.县.Requery
Me.县=Null
End Sub

3、设置县

设置县的行来源为:

SELECT 县名.县名 FROM 县名
WHERE (((县名.上级市)=[forms]![窗体12]![市]));

最后效果图:

完整源码下载:

http://www.office-cn.net/access-frmother/353.html

一篇文章我们介绍了一个html/xml解析器——htmlparser,这篇文章我们介绍另外一个解析模块htmlparser2,后者是对前者的重构,同时对前者的API做了部分兼容。

用法简介

安装

const { Parser }=require('htmlparser2');
const parser=new Parser(handler, options);
parser.parseComplete('html/xml内容');

写法

const { Parser }=require('htmlparser2');
const parser=new Parser(handler, options);
parser.parseComplete('html/xml内容');

htmlparser2提供了一个解析器——Parser,初始化它至少需要一个handler,options是可选的。

handler是一个对象,在这个对象上可以设置很多的钩子函数,Parser解析时会在每个阶段运行对应的钩子函数。

以下是可以设置的所有的钩子函数,

  • onopentag(<str> name, <obj> attributes)
  • onopentagname(<str> name)
  • onattribute(<str> name, <str> value)
  • ontext(<str> text)
  • onclosetag(<str> name)
  • onprocessinginstruction(<str> name, <str> data)
  • oncomment(<str> data)
  • oncommentend()
  • oncdatastart()
  • oncdataend()
  • onerror(<err> error)
  • onreset()
  • onend()
  • htmlparser模块是通过正则表达式来解析html内容的,而htmlparser2则不同,它会按顺序读取html的每个字符,并且推测后面字符是标签名、属性还是其他的类型,所以htmlparser2在解析完每一个标签后都会运行相应的钩子函数。

    先来看一下例子,

    图1

    图1中设置了所有的钩子函数以便来说明每个钩子函数的作用,运行一下,

    图2

    对照图1和图2就能看出来每个钩子函数的运行时机,这其中有以下几个钩子函数需要注意一下。

    • oncdatastart和oncdataend会在解析<![CDATA[文本]]>标签时触发,但是触发的前提是选项设置了recognizeCDATA=true或者xmlMode=true;
    • onprocessinginstruction会在解析<!xxyy>或者<?xxyy>这样的标签时触发,xx和yy中间可以有分隔符(斜杠或者空格),分隔符前面的字符串就是钩子函数中的name的值;
    • 运行parseComplete方法会执行reset钩子函数,如果仅仅执行parser的write或者end方法并不会执行reset方法。

    除了自定义handler以外,htmlparser2还提供了几个handler,比如DomHandler,用法如下:

    图3

    运行一下,我们看看结果,

    图4

    如果4所示,DomHandler处理的结果是以数组的形式输出的,在每个单元数据中还可以拿到上一个、下一个以及父节点的数据。

    htmlparser2还可以通过操作流Stream解析内容,写法如下:

    图5

    总结

    这篇文章和上一篇是姊妹篇,都是介绍解析html/xml内容的模块,通过对比,我们发现htmlparser2模块功能更强大一些,也更灵活一些,同时也兼容htmlparser模块的一些接口。虽然两者功能类似,但是这给了我们更多的选择性。

    喜欢我的文章就关注我吧,有问题可以发表评论,我们一起学习,共同成长!