精华内容
下载资源
问答
  • View UI的入门配置流程

    2020-08-22 23:04:44
    一、View UI(iView)是一款开源免费的 Vue.js UI 组件库 官网:https://www.iviewui.com/ (访问官网可以查看具体指南和使用组件) 二、View UI 的两种使用方式 1、直接使用提供的CDN,引入链接即可使用 &...

    一、View UI(iView)是一款开源免费的 Vue.js UI 组件库

    官网:https://www.iviewui.com/

    (访问官网可以查看具体指南和使用组件)

     

    二、View UI 的两种使用方式

    1、直接使用提供的CDN,引入链接即可使用

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>

    第一条CDN为vue.js

    最后两条CDN是必需引入的view ui文件

    示例代码:(运行后通过点击可以显示一个信息框)

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
        <meta charset="utf-8">
    
        <title>ViewUI example</title>
    
        <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    
        <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
    
    </head>
    
    <body>
    
    <div id="app">
    
        <i-button @click="show">Click me!</i-button>
    
        <Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal>
    
    </div>
    
    <script>
    
        new Vue({
    
            el: '#app',
    
            data: {
    
                visible: false
    
            },
    
            methods: {
    
                show: function () {
    
                    this.visible = true;
    
                }
    
            }
    
        })
    
      </script>
    
    </body>
    
    </html>

     

     

    2、若已经安装过vue-cli,可以使用进入自己需要的vue项目目录,运行cmd代码:

    npm install view-design --save

    然后在你的vue项目中的main.js中引入相关库文件:

    // 1. 引入库
    
    import ViewUI from 'view-design'
    
    // 2. 引入样式文件
    
    import 'view-design/dist/styles/iview.css'
    
    // 3. 使用
    
    Vue.use(ViewUI)

    这样就可以再引入使用view ui的组件了,只要根据自己的业务需要进行一定的修改就可以了~

     

    展开全文
  • View UI的简介和基本使用

    千次阅读 2020-02-08 17:54:00
    View UI(即原 iView) 是由 北京视图更新科技有限公司 开发的,面向中后台业务的一整套前端解决方案,包含了工程构建、主题定制、多语言等功能,极大提升了开发效率。 官网:https://www.iviewui.com/ 推荐使用NPM ...

    View UI(即原 iView) 是由 北京视图更新科技有限公司 开发的,面向中后台业务的一整套前端解决方案,包含了工程构建、主题定制、多语言等功能,极大提升了开发效率。
    官网:https://www.iviewui.com/
    推荐使用NPM 安装进入你的vue项目中命令行输入

    $ npm install view-design --save
    

    然后在你的vue项目中的main.js中添加就行使用你要使用的组件库

    // 手动配置View UI
    // 1. 引入库
    import ViewUI from 'view-design'
    // 2. 引入样式
    import 'view-design/dist/styles/iview.css'
    // 3. 生效
    Vue.use(ViewUI)
    
    展开全文
  • 一、ViewUI是基于Vue的UI框架。 CDN引用或本地引用: <link rel="stylesheet" type="text/css" href="./JS/ViewUI.css"> <script type="text/javascript" src="./JS/vue.min.js"></script> <...

    一、ViewUI是基于Vue的UI框架。

    CDN引用或本地引用:

    <link rel="stylesheet" type="text/css" href="./JS/ViewUI.css">
    <script type="text/javascript" src="./JS/vue.min.js"></script>
    <script type="text/javascript" src="./JS/ViewUI.min.js"></script>

    二、HTML标签是<i-Table>,VUE组件模板里是<Table>

    基本属性及使用方法看文档就可以:https://www.iviewui.com/components/table

    三、数据传递

    <Table :columns="columns" :data="data">

     

    data会按cloumns的规则自动生成表格数据。

    data是一个对象数组(数组里存json)

    columns是一个数组,里面罗列了“列”的各项属性。

    主要属性:

    title    列头显示文字,就是表头,第一行显示的文字。

    key    对应列内容的字段名,值应和data里的某一项对应。

    例子:

    data1:

                    data1: [{
                            name: '张三',
                            age: 18,
                        },
                        {
                            name: '李四',
                            age: 28,
                        }
                    ]
    

    columns1:

                    columns1: [{
                            title: '姓名',
                            key: 'name'
                        },
                        {
                            title: '年龄',
                            key: 'age'
                        }
                    ]

    显示为:

     

    四、使用slot-scope在单元格里放DOM元素

    columns还有一个重要的属性:slot   设置后,可以放弃复杂的Render函数,直接在XX标签下放一个DOM元素。

    columns1:

                    columns1: [{
                            title: '姓名',
                            slot: 'name'
                        },
                        {
                            title: '年龄',
                            key: 'age'
                        }
                    ]

    HTML:

            <i-table :columns="columns1" :data="data1">
                <template slot-scope="{ row, index }" slot="name">
                    <i-button>{{ row.name }}</i-button>
                </template>
            </i-table>

    slot应该对应columns1里的slot。

    slot-scope 的参数有 3 个:当前行数据 row,当前列数据 column,当前行序号 index

    row就是data1[index]   =>  data[2]

    row.name就是data1[index].name   =>   data[2].name

    结果显示为:

     

    展开全文
  • View UI (iview)表格拖拽排序 教程

    千次阅读 2020-06-10 15:31:25
    View UI,即原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo 在项目开发中,有时需要对表格进行拖拽排序,View UI (iView)从3.3.0版本开始,增加了拖拽调整行顺序功能,但是目前官网并...

    View UI,即原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo

    在项目开发中,有时需要对表格进行拖拽排序,View UI (iView)从3.3.0版本开始,增加了 拖拽调整行顺序功能,但是目前官网并没有给出相关示例 demo,于是笔者决定写篇文章进行总结。看过官网 api 后,其实还是很简单的

     

    1、拖拽功能实现

    代码如下

    <template>
        <Table 
            border 
            :columns="columns1" 
            :data="datas" 
            :draggable="true"
            @on-drag-drop="onDragDrop"
        >
        </Table>
    </template>
    <script>
    export default {
        data() {
            return {
                columns1:[
                    {
                        title: 'name',
                        key: 'name'
                    },
                    {
                        title: 'age',
                        key: 'age'
                    }
                ],
                datas: [
                    {
                        'name': '公孙胜',
                        'age': 43
                    },
                    {
                        'name': '宋江',
                        'age': 35
                    },
                    {
                        'name': '吴用',
                        'age': 34
                    },
                    {
                        'name': '关胜',
                        'age': 33
                    },
                    {
                        'name': '林冲',
                        'age': 34
                    },
                    {
                        'name': '秦明',
                        'age': 32
                    },
                    {
                        'name': '卢俊义',
                        'age': 33
                    }
                ]
            }
        },
        methods: {
            onDragDrop(first, end) {
                //转成int型,方便后续使用
                first = parseInt(first)
                end = parseInt(end)
    
                let tmp = this.datas[first]
    
                if(first < end) {
                    for(var i=first+1; i<=end; i++) {
                        this.datas.splice(i-1, 1, this.datas[i])
                    }
                    this.datas.splice(end, 1, tmp)
                }
    
                if(first > end) {
                    for(var i=first; i>end; i--) {
                        this.datas.splice(i, 1, this.datas[i-1])
                    }
                    this.datas.splice(end, 1, tmp)
                }
            }
        }
    }
    </script>

    首先,要在 Table 标签上设置draggable="true"属性,开启拖拽功能

    然后,添加 @on-drag-drop="onDragDrop"方法,实现拖拽逻辑,onDragDrop 方法返回置换的两行数据索引

    onDragDrop 方法里具体的逻辑可以根据自己的情况自定义。我的代码逻辑是,如果是向下拖拽,则下边的数据依次向上移动;如果向上拖拽,上边的数据依次向下移动

     

    运行效果如下图

     

    2、拖拽排序功能实现

    前面,已经实现了前端拖拽功能,但是要想完成真正意义上的排序,还需要为每条数据增加一个排序字段,并且要和后台交互及时同步排序值

     

    代码如下

    <template>
         <Table    
            border
            :columns="columns1"
            :data="datas"
            :draggable="true"
            @on-drag-drop="onDragDrop"
        >
        </Table>
    </template>
    <script>
    export default {
        data() {
            return {
                columns1:[
                    {
                        title: 'name',
                        key: 'name'
                    },
                    {
                        title: 'age',
                        key: 'age'
                    }
                ],
                datas: [
                    {
                        'name': '公孙胜',
                        'age': 43,
                        'sort': 1
                    },
                    {
                        'name': '宋江',
                        'age': 35,
                        'sort': 2
                    },
                    {
                        'name': '吴用',
                        'age': 34,
                        'sort': 3
                    },
                    {
                        'name': '关胜',
                        'age': 33,
                        'sort': 4
                    },
                    {
                        'name': '林冲',
                        'age': 34,
                        'sort': 5
                    },
                    {
                        'name': '秦明',
                        'age': 32,
                        'sort': 6
                    },
                    {
                        'name': '卢俊义',
                        'age': 33,
                        'sort': 7
                    }
                ]
            }
        },
        methods: {
            onDragDrop(first, end) {
                //转成int型,方便后续使用
                first = parseInt(first)
                end = parseInt(end)
    
                let tmp = this.datas[first]
    
                if(first < end) {
                    for(var i=first+1; i<=end; i++) {
                        this.datas.splice(i-1,1,this.datas[i])
                    }
                    this.datas.splice(end,1,tmp)
                }
    
                if(first > end) {
                    for(var i=first; i>end; i--) {
                        this.datas.splice(i, 1, this.datas[i-1])
                    }
                    this.datas.splice(end, 1, tmp)
                }
    
                //重置排序值
                let index = 1
                this.datas.forEach(e => {
                    e.sort = index
                    index++
                })
                //排序值重置后,向后台发送请求,更新数据库中数据的排序,这里就不写了
                //axios
    
                console.log(JSON.stringify(this.datas))
            }
    
           
        }
    }
    </script>

    上面代码中,datas 的每个对象中增加了 sort 排序字段,假设后台返回给前端的 datas 数据格式已经排序完成,按 sort 字段从小到大排序

    在 onDragDrop 方法中,每次排序完成,重新计算排序值,并向后台发送请求更新数据库中数据的排序值

     

    运行效果如下图

     

    其中,每次排序后,都会计算最新的排序值,如下图

    右侧打印的数据可以看到,每次排序后,sort 值重新计算,保证从小到大排序

     

     

    至此完
     

     

    展开全文
  • View UI (iview)表格 行/列合并 教程

    千次阅读 2020-05-13 15:18:57
    View UI,即原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo 在项目开发中,有时需要将表格的行或列进行合并,View UI (iView)从4.0.0版本开始,增加了行/列合并 属性,使我们可以方便地...
  • Dump view UI hierarchy for Automator

    千次阅读 2016-02-03 16:00:05
    UI调试时程序员比较头疼的问题:有时候经常会被1dp、2dp的问题,搞得无言以对(Android开发深有体会)   下面介绍一个在实际开发过程中常用的一个...其实就是在DDMS视图下,使用Dump view UI hierarchy for Auto
  • View UI,即原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo 问题描述:在使用 View UI (iview) 的 select 标签时,无意间发现一个问题,就是在select 标签中选中一个值,然后将 ...
  • 写在前面 金秋十月,iView 4.0 如约而至。但是标题信息量有点大,所以先来解读一下...View UI 即为原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo。iView 作者将在新仓库 github.com/v...
  • Element UI开发文档 npm 安装 npm i element-ui -S 引入 Element 完整引入 在 main.js 中写入以下内容: import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index....
  • vue中配置ViewUI

    2020-06-10 19:06:08
    1.使用 cnpm install view-design --save。 2.完成后再执行 cnpm install。
  • “libraryName”: “view-design”, “libraryDirectory”: “src/components” }]] } // main.js 可以统一打包一个js放这个 import { Button, Table } from ‘view-design’; Vue.component(‘Butt
  • 下载 moment.js npm install moment --save 引入 moment.js import Moment from 'moment' Vue.prototype.moment = Moment 组件中 表格...MM-DD') return result } 显示效果 参考文章 vue+element-ui 表格中的时间格式化
  • 记录一个问题解决方式: 出现此错误的原因:开始用了按需引入,然后又切换到全局引入,就会报这个错 解决方式: 找到babel.config.js下面的plugins 然后删除import内容 重启一下就不会报错了~~~ ...
  • Xcode可以显示运行页面的立体uivew结构图,可以让你看到一个页面包含哪些视图,在哪一层,在页面的什么位置。一看就能看到你的uiview是否显示,显示在哪里了。用鼠标点击页面移动鼠标可以看到页面的分层显示
  • 使用UI Automator ViewUI测试

    千次阅读 2015-05-07 15:43:08
    在Android 4.1发布的时候包含了一种新的测试工具–uiautomator,uiautomator是用来做UI测试的。也就是普通的手工测试,点击每个控件元素 看看输出的结果是否符合预期。比如 登陆界面 分别输入正确和错误的用户名...
  • android自定义view复用UI

    2016-11-10 12:03:51
    *前言:*项目搭建UI中,我们总会遇到很多都是地方重复样式,比如:现在来学习一下如何自定义...1.自定义view类public class ServiceView extends LinearLayout { private TextView tv_content; //右边显示的内容 priv
  • UILibrary 一些 UI 相关的 View、Drawable 等整理了一下
  • dump View Hierarchy for UI automator

    千次阅读 2016-07-08 18:18:05
    学习布局的好工具dump View Hierarchy for UI automator,效果图如下:左侧部分点击按钮,就会实时刷新手机app的页面,当鼠标点击界面时,右侧1就是显示当前页面的布局,2为你选择控件的属性,是不是很方便查看其它...
  • UI5 例如我在UI5的界面上画一个按钮,点击之后弹出一个Alert dialog。 在XML view里只定义了controller的名称和事件处理函数的名称。那么按钮被点击之后,controller的onShowHello被触发。但是,这个controller...
  • swiftuiNavigationView is SwiftUI’s counterpart to UIKit’s UINavigationController. A NavigationView is defined by Apple as “A view for presenting a stack of views representing a visible path in a ...
  • 使用步骤: 1.连接上手机,打开手机的某个应用 2.打开安卓SDK目录\tools\monitor.bat 下的 Dump View Hierarchy for UI Automator 3.点击如图所示图标
  • View组件及UI界面控制方法

    千次阅读 2017-06-16 20:10:50
    使用XML布局文件控制UI界面View及ViewGroup类介绍Android应用的所有UI组件都继承了View类,View组件非常类似于Swing编程中的JPanel,它代表了一个空白的矩形区域。Android采用了”组合器“设计模式来设计View和...
  • SwiftUI 高级功能使用之AnyViewViewBuilder AnyView SwiftUI 内功之如果View作为参数传递给组件Toast组件高级版 (技巧含源码) @ViewBuilder macOS SwiftUI 教程之显示HUD窗口 (教程含源码) 加入我们一起...
  • NavigationView是SwiftUI应用程序最重要的组件之一,它使我们能够轻松推送和弹出屏幕,以清晰,分层的方式向用户展示信息。NavigationView一般用在页面的最外层。可以在其内部添加标题栏,页面内容,以及底部导航栏...
  • 安卓UI开发基础-View

    千次阅读 2015-11-13 18:13:55
    要做出屌炸天的UI交互,必然要先深入理解安卓View对象,然后才能做出优秀的自定义UI控件。本文包括以下几个部分的内容:View对象是什么?如何灵活加载View对象?View的绘制流程,View状态及重绘流程,简单自定义View...
  • 之前讲解了TraceView和Systrace的基本使用方式 跳转连接 接下来我们通过实例来分析一下是什么原因导致了UI绘制过程中每帧的时间超过了16ms
  • UI 创建一个view对象

    2014-06-11 17:30:20
    创建view 1 建立一个UIview对象 UI
  • UISCroll View 原理

    千次阅读 2012-08-31 09:18:38
    最近看到有人问这个问题:在UIScrollView上添加了一个ViewView上面有图片等元素,需要对单击和滑动事件进行区分。这样的问题有以下几个经常会用到的地方:  (1)点击UIScrollView上的图片,跳转到其他页面;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,973
精华内容 14,789
关键字:

viewui