element 订阅
Element是一份基于Ubuntu的发行,它面向家庭影院或媒体中心式的个人电脑,这类电脑可拥有十英尺大的用户屏幕并被设计为连接到高清晰度电视, 以获取一份数字媒体和因特网体验,而这种体验可以在客厅或娱乐场所舒适地获得。Element预加载有大量应用程序,它们使得用户能收听、收看和管理音 。 展开全文
Element是一份基于Ubuntu的发行,它面向家庭影院或媒体中心式的个人电脑,这类电脑可拥有十英尺大的用户屏幕并被设计为连接到高清晰度电视, 以获取一份数字媒体和因特网体验,而这种体验可以在客厅或娱乐场所舒适地获得。Element预加载有大量应用程序,它们使得用户能收听、收看和管理音 。
信息
类    型
个人电脑
特    点
十英尺大的用户屏幕
基    础
Ubuntu
外文名
elemeNt
elemeNt版本发布
2010年03月28日,Element 1.1 发布。 [1]  2010年05月17日,Element 1.2 发布。 [2]  2010年07月03日,Element 1.3 发。 [3]  2010年09月02日,Linux 发行版 Element 1.4 发布。 [4] 
收起全文
精华内容
下载资源
问答
  • element关于table拖拽排序问题

    万次阅读 2019-10-29 20:31:03
    element关于table拖拽排序问题

    博客地址:http://www.globm.top/blog/1/detail/41
    最近在使用element table的时候,经常会遇到排序的问题,如果只是简单的排序的话,element官方已经给出了指定的方法

    //table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
        <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
          //设置sortable属性时出现排序按钮
          <el-table-column prop="ID" label="座号" sortable>
        </el-table>
    

    但是,element官方组件并不支持拖拽排序,我在这里引入sortablejs实现拖拽排序的功能

    • sortablejs GitHub地址
    //sortablejs     GitHub地址
    https://github.com/SortableJS/Sortable#readme
    
    //安装sortable.js
    Install with NPM:
    
    $ npm install sortablejs --save
    
    //在组件内引入
    import Sortable from 'sortablejs'
    
    //为需要拖拽排序的表格添加ref属性
    <el-table  ref="dragTable">
    
    //在数据渲染完毕添加拖拽事件
    created(){
       this.getBanner()
    },
    methods:{
    	async getBanner(val){
              await apiGetBanner().then((res)=>{
                   this.bannerTable = res.data.data;
              })
             this.oldList = this.bannerTable.map(v => v.id);
             this.newList = this.oldList.slice();
             this.$nextTick(() => {
                 this.setSort()  //数据渲染完毕执行方法
             })
        }
        setSort() {
            const el = this.$refs.dragTable.$el.querySelectorAll(
            		'.el-table__body-wrapper > table > tbody'
            )[0];
            this.sortable = Sortable.create(el, {
            	// Class name for the drop placeholder,
            		ghostClass: 'sortable-ghost', 
                    setData: function(dataTransfer) {
                    dataTransfer.setData('Text', '')
                },
               //拖拽结束执行,evt执向拖拽的参数
               onEnd: evt => {
                  //判断是否重新排序
                  if(evt.oldIndex !== evt.newIndex){
                      let data = {
                         id:this.bannerTable[evt.oldIndex].id,
                         banner_order:evt.newIndex
                      }
                      //数据提交失败则恢复旧的排序
                      apiPutBanner(data).catch(()=>{
                         const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                         this.bannerTable.splice(evt.newIndex, 0, targetRow);
                      })
                  }
                }
            })
        }
    }
    
    

    如果需要列拖拽的话,可以参考下面的代码,和上面是一样的原理,在这里我就不赘述了

    //行拖拽
        rowDrop() {
          const tbody = document.querySelector('.el-table__body-wrapper tbody')
          const _this = this
          Sortable.create(tbody, {
            onEnd({ newIndex, oldIndex }) {
              const currRow = _this.tableData.splice(oldIndex, 1)[0]
              _this.tableData.splice(newIndex, 0, currRow)
            }
          })
        },
        //列拖拽
        columnDrop() {
          const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
          this.sortable = Sortable.create(wrapperTr, {
            animation: 180,
            delay: 0,
            onEnd: evt => {
              const oldItem = this.dropCol[evt.oldIndex]
              this.dropCol.splice(evt.oldIndex, 1)
              this.dropCol.splice(evt.newIndex, 0, oldItem)
            }
          })
        }
    
    展开全文
  • element input输入框自动获取焦点

    万次阅读 2019-10-25 14:25:40
    但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 document.getElementById("input").focus(); 或者利用vue的ref属性也可以实现聚焦效果: 原理其实很简单,Element 已经提供了 ...

    博客地址:http://www.globm.top/blog/1/detail/43
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。

    但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了

    document.getElementById("input").focus();
    

    或者利用vue的ref属性也可以实现聚焦效果:

    原理其实很简单,Element 已经提供了 focus 方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要的地方直接调用方法就可以了

    <el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>
    
    this.$nextTick(() => {
          this.$refs.input.focus()
        })
    

    注意:一个页面只能有一个聚焦效果


    last , vue也支持自定义指令
    当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
        // element-ui
        el.children[0].focus()
        // 元素有变化,如show或者父元素变化可以加延时或判断
        setTimeout(_ => {
          el.children[0].focus()
        })
      }
    })
    

    参考:vue自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html

    展开全文
  • 突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。 先来上手体验一下 首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程...

    官方文档已更新: 点击跳转

    突然发现已经半年没更新的element-ui更新了
    在这里插入图片描述
    更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。
    在这里插入图片描述
    先来上手体验一下
    首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了。建好之后,直接开始安装吧

    npm i element-plus 
    

    为了方便,直接采取全部引入的方式

    src/plugins/element.ts

    import ElementPlus from 'element-plus'
    import 'element-plus/lib/theme-chalk/index.css'
    
    export default (app: any) => {
      app.use(ElementPlus)
    }
    

    src/main.ts

    import router from './router'
    import store from './store'
    import App from './App.vue'
    import { createApp } from 'vue'
    import installElementPlus from './plugins/element'
    const app = createApp(App)
    installElementPlus(app)
    app.use(store).use(router).mount('#app')
    

    在页面中加一个按钮

    <el-button type="primary">el-button</el-button>
    

    在这里插入图片描述
    在新版的vue3.x版本中还保留了原有的生命周期函数

    created(){
      this.$message("message")
    },
    

    在这里插入图片描述
    打印了一下this
    在这里插入图片描述

    更新补充:

    element-plus按需引入

    src/plugins/element.ts

    import { Button, Message } from 'element-plus'
    
    export default (app) => {
      app.use(Button)
      app.use(Message)
    }
    

    babel.config.js

    module.exports = {
      "presets": [
        "@vue/cli-plugin-babel/preset"
      ],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-plus",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
    

    在vue3.0 setup中使用

    import { setup } from 'vue-class-component'
    import { getCurrentInstance } from 'vue'
    export default {
      name: 'App',
      components: {
    
      },
      setup(e){
        const {ctx} = getCurrentInstance()
        ctx.$message("mesage")
      }
    }
    

    更新:ctx 打包之后无法调用$message,可以使用proxy

    import { getCurrentInstance } from 'vue'
    export default {
      name: 'App',
      components: {
    
      },
      setup(){
        const {proxy} = getCurrentInstance()
        proxy.$message("mesage")
      }
    }
    
    展开全文
  • 在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。...

    2021-1-6更新
    针对评论出现的问题
    1、 noresize="false"属性类型不符,加冒号绑定为动态属性 :noresize="false"
    2、代码不生效的问题,可能是没有设置高度导致,为<el-scrollbar />设置高度。

    在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。

    使用的原因:

    原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。

    .sidebar {
        position: fixed;
        border-right: 1px solid rgba(0,0,0,.07);
        overflow-y: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transition: transform .25s ease-out;
        width: 300px;
        z-index: 3;
    }
    .sidebar::-webkit-scrollbar {
        width: 4px
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px
    }
    
    .sidebar:hover::-webkit-scrollbar-thumb {
        background: hsla(0,0%,53%,.4)
    }
    
    .sidebar:hover::-webkit-scrollbar-track {
        background: hsla(0,0%,53%,.1)
    }
    

    灵感来源

    在翻看 element-ui官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致。但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档中,需要用的自己看源码进行调用。

    最终实现效果

    后台管理框架

    实现步骤

    一、阅读源码

    通过阅读源码,scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

    props: {
        native: Boolean,  // 是否使用本地,设为true则不会启用element-ui自定义的滚动条
        wrapStyle: {},  // 包裹层自定义样式
        wrapClass: {},  // 包裹层自定义样式类
        viewClass: {},  // 可滚动部分自定义样式类
        viewStyle: {},  // 可滚动部分自定义样式
        noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
        tag: {  // 生成的标签类型,默认使用 `div`标签包裹
          type: String,
          default: 'div'
        }
    }
    

    二、在页面中使用 el-scrollbar组件

    <template>
    	<div>
    		<el-scrollbar style="height: 200px;" :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" :noresize="false" tag="section">
    			<div>
    				<p v-for="(item, index) in 200" :key="index">{{index}} 这里是一些文本。</p>
    			</div>
    		</el-scrollbar>
    	</div>
    </template>
    

    以上代码就是对 el-scrollbar 的使用了,属性不需要用的就不用写。

    源码

    源码在node_modules 目录下的 element-ui/packages/scrollbar

    模块入口index.js,从main导入 scrollbar并提供一个安装方法注册成全局组件
    import Scrollbar from './src/main';
    
    /* istanbul ignore next */
    Scrollbar.install = function(Vue) {
      Vue.component(Scrollbar.name, Scrollbar);
    };
    
    export default Scrollbar;
    
    
    src/main.js 源码
    // reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
    
    import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
    import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
    import { toObject } from 'element-ui/src/utils/util';
    import Bar from './bar';
    
    /* istanbul ignore next */
    export default {
      name: 'ElScrollbar',
    
      components: { Bar },
    
      props: {
        native: Boolean,
        wrapStyle: {},
        wrapClass: {},
        viewClass: {},
        viewStyle: {},
        noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
        tag: {
          type: String,
          default: 'div'
        }
      },
    
      data() {
        return {
          sizeWidth: '0',
          sizeHeight: '0',
          moveX: 0,
          moveY: 0
        };
      },
    
      computed: {
        wrap() {
          return this.$refs.wrap;
        }
      },
    
      render(h) {
        let gutter = scrollbarWidth();
        let style = this.wrapStyle;
    
        if (gutter) {
          const gutterWith = `-${gutter}px`;
          const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
    
          if (Array.isArray(this.wrapStyle)) {
            style = toObject(this.wrapStyle);
            style.marginRight = style.marginBottom = gutterWith;
          } else if (typeof this.wrapStyle === 'string') {
            style += gutterStyle;
          } else {
            style = gutterStyle;
          }
        }
        const view = h(this.tag, {
          class: ['el-scrollbar__view', this.viewClass],
          style: this.viewStyle,
          ref: 'resize'
        }, this.$slots.default);
        const wrap = (
          <div
            ref="wrap"
            style={ style }
            onScroll={ this.handleScroll }
            class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>
            { [view] }
          </div>
        );
        let nodes;
    
        if (!this.native) {
          nodes = ([
            wrap,
            <Bar
              move={ this.moveX }
              size={ this.sizeWidth }></Bar>,
            <Bar
              vertical
              move={ this.moveY }
              size={ this.sizeHeight }></Bar>
          ]);
        } else {
          nodes = ([
            <div
              ref="wrap"
              class={ [this.wrapClass, 'el-scrollbar__wrap'] }
              style={ style }>
              { [view] }
            </div>
          ]);
        }
        return h('div', { class: 'el-scrollbar' }, nodes);
      },
    
      methods: {
        handleScroll() {
          const wrap = this.wrap;
    
          this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
          this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
        },
    
        update() {
          let heightPercentage, widthPercentage;
          const wrap = this.wrap;
          if (!wrap) return;
    
          heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
          widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);
    
          this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
          this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
        }
      },
    
      mounted() {
        if (this.native) return;
        this.$nextTick(this.update);
        !this.noresize && addResizeListener(this.$refs.resize, this.update);
      },
    
      beforeDestroy() {
        if (this.native) return;
        !this.noresize && removeResizeListener(this.$refs.resize, this.update);
      }
    };
    
    
    展开全文
  • element-ui 本地化使用教程

    万次阅读 2019-10-26 10:22:58
    element-ui 本地化使用 element-ui 下载脚本
  • Element
  • vue-element-admin完整项目实例

    万次阅读 多人点赞 2019-06-12 12:19:27
    项目地址:https://github.com/PanJiaChen/vue-element-admin 项目介绍:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/ 项目效果: npm install 报错 或者是下面的错误 git.EXE ls-remote...
  • pom.xml提示Element connectors is not allowed here 解决方案是
  • Element UI 官网地址

    万次阅读 2018-09-30 10:16:39
    Element UI 官网地址
  • Element-Ui组件(二)Icon 图标

    万次阅读 多人点赞 2019-06-03 16:16:39
    Element-Ui组件(二)图标应用 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在...
  • Vue +Element UI 图片上传控件使用

    万次阅读 多人点赞 2018-07-11 16:34:12
    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装...
  • Element 官方宣布了:Element UI for Vue 3.0 来了!

    千次阅读 多人点赞 2020-12-01 13:00:58
    Element Plus for Vue 3.0 来了,这次真的来了!Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是...
  • Unknown custom element: &lt;myData&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option. 2. 原因是注册方式写重了: 3....
  • Element UI的表格table列的宽度自适应设置

    万次阅读 热门讨论 2018-03-23 16:05:22
    不要设置 width="110px" <el-table-column prop="login_id" align="center" label="工号"> </el-table-column> ...el-table-column prop="login_id" width="110px" align="center" label="工号...
  • vue之element-ui文件上传

    万次阅读 多人点赞 2018-06-29 17:47:56
    文件上传需求  对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件。...http://element-cn.eleme.io/#/zh-CN/component/upload 对于第二...
  • 今天怂怂就为大家分享一篇如何解决自定义了一个组件vTable,在nationsjgx-detailInfo.vue中页面中使用vTable组件提示: Unknown custom element: <v-table> - did you register the component correctly? For ...
  • 之前在使用Element-ui的tabs标签页的时候,content内容只能是html内容和字符串,所以在使用element自定义标签(比如按钮&lt;el-button&gt;,表格&lt;el-table&gt;)的时候会出现直接显示字符串的样子...
  • html文件引入element ui后,报错 element.js:1 GET file:///D:/llz/test-8-17/css/fonts/element-icons.woff net::ERR_FILE_NOT_FOUND element-icons.woff 和 element-icons.ttf文件找不到 只要在对应文件夹里引入...
  • Majority Element

    千次阅读 2015-03-19 14:42:55
    Given an array of size n, find the majority element. The majority element is the element that appears more than ⌊ n/2 ⌋ times. You may assume that the array is non-empty and the majority element ...
  • vue导入element-ui并使用element-ui组件

    千次阅读 2020-08-03 21:46:49
    npm install element-ui -S 2、在项目中导入,修改main.js /** 引入element ,必须有*/ import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI);
  • 使用Vue.js和Element-UI做一个简单的登录页面
  • Axure使用 element UI 元件库

    万次阅读 多人点赞 2020-02-17 10:45:00
    element UI 元件库文件 下载地址:https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib 或者 可以去官网点击下载 官网:https://element.eleme.cn/#/en-US/resource 安装步骤 下载...
  • element js 文件

    千次阅读 2019-10-01 19:20:05
    其实有时候不想用nodejs 只想单纯的使用 element 的ui控件这些就没必要 npm i element-ui -S 下载出所有的包来,看起来也很烦,使用他们的cdn 给我的感觉就是速度有些慢,icon图标的加载和渲染需要一点时间,这里把...
  • LeetCode Majority Element

    千次阅读 2015-07-20 14:58:41
    Given an array of size n, find the majority element. The majority element is the element that appears more than ⌊ n/2 ⌋ times.You may assume that the array is non-empty and the majority element ...
  • 前言 官方推荐的css及js引用方式如下: ...link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/elemen...
  • element table 组件内容换行方案

    万次阅读 热门讨论 2018-03-07 20:55:27
    element table 组件内容换行方案 背景 临时接手了一个element UI的前端项目,吐槽一下后台接口,这个idCardNo字段。 项目直接使用了el-table组件: &amp;lt;el-table :data=&quot;warnings&...
  • Element-UI详解

    千次阅读 2019-11-06 09:00:58
    Element-UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制 安装...
  • 今天使用selenium在爬取网易云碰到报错message: no such element: Unable to locate element: 当时我是直接定位到歌曲的超链接位置 SongLink=browser.find_element_by_class_name("s-fc7") 然后就报错说找不到...
  • element-ui

    千次阅读 2019-06-03 03:04:16
    安装 npm i element-ui 这三句不能少

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 269,690
精华内容 107,876
关键字:

element