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 组件使用心得

    千次阅读 2018-08-07 13:04:51
    Element 组件本人第一次使用,此文章为使用总结,不足之处请多多指教! 1、推荐使用 npm 安装,可以更好的与 webpack 打包工具使用  npm i element-ui -S 2、CDN(构建在网络之上的内容分发网络)  可以通过在...

    Element 组件本人第一次使用,此文章为使用总结,不足之处请多多指教!

    1、推荐使用 npm 安装,可以更好的与 webpack 打包工具使用

          npm i element-ui -S

    2、CDN(构建在网络之上的内容分发网络)

          可以通过在页面上引入js和css文件进行使用

          <!-- 引入样式 -->  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

          <!-- 引入组件库 -->  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

          ***** Element 官网建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免升级时收到非兼容性更新的影响。

          锁定版本的方法请查看 unpkg.com

    3、引入 Element

         完整引入 --- 在 main.js 中写入以下内容:

          

          按需引入 --- 借助 babel-plugin-component ,可以只引入需要的组件,以减小项目的体积

          1)、安装 babel-plugin-component: npm install bable-plugin-component -D

          2)、将 .babelrc 修改为:

          

          3)、按照需要在 main.js 中写入(以 Button、Select 为例)

          

          浅谈 babel      

    4、全局配置

          在引入 Element 时,传入一个全局配置对象,该对象支持 size 以及 zIndex。

          size 用于改变组件的默认尺寸

          zIndex 设置的是弹窗的 z-index (默认值是2000)

          完整引入:

          

          按需引入:

          

    5、自定义主题颜色 --- 在线主题生成工具

     

     

     

     

     

     

     

     

     

     

     

     

          

     

    展开全文
  • Element-UI使用指南

    万次阅读 多人点赞 2016-11-03 17:48:53
    Element-UI使用指南 Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。 开发环境1.安装webpacknpm install -g webpack2.安装vue-clivue-cli是什么?vue-cli 是...

    Element-UI饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI

    开发环境


    1.安装webpack

    npm install -g webpack

    2.安装vue-cli

    vue-cli是什么?

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。

    使用步骤:

    • 安装vue-cli:

      npm install -g vue-cli
    • 使用vue-cli构建项目

      vue init webpack project-name  //创建一个基于webpack模板的名为project-name的项目

      目前可用的模板包括:

      • browserify–全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
      • browserify-simple–一个简易的Browserify + vueify,以便于快速开始。
      • webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
      • webpack-simple–一个简易的Webpack + vueify,以便于快速开始。
    • 安装项目依赖

      cd project-name    //进入项目目录
      npm install        //安装项目依赖
      npm run dev        //运行项目

    此时在浏览器打开:localhost:8080即可看到欢迎页。

    关于webpack和vue-cli的更多使用方法参见官方文档。

    • 但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?此时需要执行

      npm run build

    搭建开发环境

    本来想用vue-cli重新创建项目,试了几次总是出现各种问题,没办法成功。最后在仔细查看 Element-UI官方文档快速上手 部分的时候发现 饿了么 团队给了一个他们自己的 项目模板 。于是我就用这个模板来尝试了下,结果成功了。所以,如果你不想太折腾的话,建议还是使用官方给的项目模板,可以省很多事。

    第一步:安装项目模板

    • 克隆/下载项目模板

    • 将下载的模板放到你项目的根目录下

    • 安装依赖

      npm install
    • 运行项目模板

      npm run dev

      此时在浏览器打开:localhost:8080即可看到欢迎页。

      欢迎页

    项目模板里已经把需要配置的文件都配置好了。

    第二步:安装element-ui

    第一步,我们成功安装了项目模板,接下来,我们需要安装element-ui到项目下。

    npm i element-ui@next -D

    开始使用

    接下来我们就可以参照 Element-UI官方文档上手开发了。

    例子

    我们参照官方的按钮组件使用说明,在项目模板的基础上做一个按钮的例子。其它文件不需要改动,只修改App.vue文件的内容。代码如下:

    App.vue

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <h1>{{ msg }}</h1>
        <el-button @click.native="startHacking">Let's do it</el-button>
        <div class="block">
        <span class="demonstration">显示默认颜色</span>
        <span class="wrapper">
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        </span>
        </div>
        <br/>
        <div class="block">
          <span class="demonstration">hover 显示颜色</span>
        <span class="wrapper">
        <el-button :plain="true" type="success">成功按钮</el-button>
        <el-button :plain="true" type="warning">警告按钮</el-button>
        <el-button :plain="true" type="danger">危险按钮</el-button>
        <el-button :plain="true" type="info">信息按钮</el-button>
        </span>
        </div>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          msg: 'Use Vue 2.0 Today!'
        }
      },
    
      methods: {
        startHacking () {
          this.$notify({
            title: 'It Works',
            message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
            duration: 6000
          })
        }
      }
    }
    </script>
    
    <style>
    body {
      font-family: Helvetica, sans-serif;
    }
    </style>
    

    效果如下图所示:

    demo


    使用过程中碰到的问题:

    1. phantomjs安装失败

    由于源的问题,安装phantomjs必须要“搭梯子”,使用内网无法下载。所以解决的方法有两种:

    • 方法一:通过科学上网,然后安装。

    • 方法二:对于不知道怎么“搭梯子”的同学,可以通过更改源来下载,操作方法如下:

      npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads

    2.打开页面乱码

    通过 Element-UI 官方提供的项目模板开发,会发现在浏览器打开页面的时候,中文是乱码的。如下图所示:

    中文乱码

    html页面中已经设置了<meta chartset='utf-8'>

    仔细查看该页面所涉及的文件的编码格式的时候,发现引用的App.vue 文件的编码格式是GBK ,所以把该文件编码格式改为UTF-8 即可。

    展开全文
  • Element学习教程

    千次阅读 2018-08-01 13:44:07
    http://element-cn.eleme.io/#/zh-CN/component/installation
    展开全文
  • VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vue作为前端框架,vuejs轻量、简单,对于前端友好,学习路线平坦,这使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。...

    VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vue作为前端框架,vuejs轻量、简单,对于前端友好,学习路线平坦,这使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。其中ElementUI,就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境:

    • NodeJS(npm)
    • Webstorm (前端IDE)
    • Nginx(后期用来转发请求到后台服务器)

    由于我们需要使用npm的包管理器,所以首先得先安装nodejs,  直接在node官网下载

    windows系统直接下载  .msi。下载完毕直接双击安装就ok啦

    安装完毕,打开cmd 输入命令 npm -v 查看是否安装成功以及版本

    打开webstorm,点击左上角File->New->Edit File Templates,在弹出的对话框中点击左上角的绿色加号,然后按照如图显示填写Name和Extension,

    在下方橙色区域的代码段内填写

    <template>
        <div>
        </div>
    </template>
    <script type="text/ecmascript-6">
        export default {
            data(){
                return {
    
                }
            }
        }
    </script>
    

    然后点击apply,再点击ok即可。现在我们再次点击左上角File->New,可以看到刚才创建的vue template已经出现了。我们点击vue template,名称填写test,可以看到新创建的文件就是刚才我们创建的模版的样子,如图。 

    然后再设置编辑器的为ES6语法 如图

    创建ElementUI工程

    ① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板, 
    ② 使用cnpm intsall下载依赖的模块(没有淘宝镜像 cnpm 可以使用npm install) 
    ③ 使用npm run dev运行项目

    可以看到里面已经集成了bable、webpack等插件。不需要我们自己去配置。我们导入这个工程之后,需要做的一件事就是将npm模块安装到这个目录下。我们打开命令行,进入当前工程的根目录,然后输入

    npm install

    如果安装速度较慢,可以使用npm依赖包在国内由阿里云提供的镜像,如下所示

    npm install --registry=http://registry.npm.taobao.org

    点击回车。

    安装结束后我们可以看到工程目录下多了一个node_modules的文件夹,该文件夹就是工程的依赖包所在。以后我们如果想添加依赖包,就可以继续用上文的指令,例如如果想加入vue-router,那么需要输入

    npm install vue-router --save

    npm会自动寻找最新版本的依赖包进行安装。

    工程打包运行

    安装好依赖之后,我们可以对工程进行打包和运行。我们仍然是使用命令行,进入当前工程的目录,并输入

    npm run dev

    这段代码的意思就是以本地服务器的端口启动这个工程。关于本地服务器的配置信息,在工程根目录的webpack.config.js中,我们可以在该文件中看到如下代码段:

    devServer: {
        host: '127.0.0.1',
        port: 8010,
        proxy: {
          '/api/': {
            target: 'http://127.0.0.1:8080',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },
    •  

    这里的配置信息写的很清楚,本地的服务器端口为8010,如果我们想改变端口号或主机名,只要改变这里对应的字段即可。 
    我们输入npm run dev后,会出现一长串信息,最后会出现webpack: Compiled successfully的字样,代表我们的代码编译成功。这时我们打开浏览器,输入localhost:8010,出现如图所示的网页,表示我们的第一个Vuejs2.0 +ElementUI工程已经成功运行。 

     

    点击图中的Let’s do it按钮,可以看到右侧有一个提醒消息飘出来,这就是ElementUI中的一个组件。 

    至此一个简单的基于VueJs2.0和ElementUI的前端网站的雏形已经完成了,接下来的时间我会慢慢介绍构建单页面应用的更多方法和细节。

     


    想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

    展开全文
  • Element-Ui组件(一)页面布局

    万次阅读 2019-05-30 17:00:33
    Element-Ui组件(一)页面布局 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 常用布局 el-row与el-col可搭配实现24格栅格布局,若布局较复杂,可以嵌套使用。 el-container作为布局...
  • Element-ui坑

    2019-05-09 20:56:26
    1.@change传参 @change="handleChange($event,'自定义传参')" 2.默认事件传参 例:上传组件的上传之前的钩子:before-upload="beforeAvatarUpload" 默认的参数只有 file 想要多个上传组件公用一个方法,又有...
  • 1.元素单击 click() 作用:触发当前元素的点击事件,只要... ... driver.findElement(By.id("su")).click(); 2.写入内容和按键操作sendKeys() 作用:往文本输入框中写入一些内容 比如说百度的搜索框...
  • element.js

    2019-07-04 09:16:29
    element-ui 离线开发资源 支持离线开发
  • element 分页使用

    千次阅读 2019-03-23 12:03:31
    for (let i = 0; i < this.tableData.length; i++) { this.tableData[i].settlementAmount = this.tableData[i].settlementAmount.toFixed(2) // 10条每页的时候 .toFixed(2) ...
  • Element 的方法和属性

    千次阅读 2018-11-19 23:19:03
    element event 事件源 &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; ...
  • 在使用elementui的时候,使用下面模式的时候存在代码调用懒加载,帮助文档没有提具体的方式。 例子: 具体的代码可能通过该功能进行调用: this.$refs.treeTable.toggleRowExpansion(row); row是对象。...
  • 1、GeoHash是啥? GeoHash通过某种方法将二维的点数据转换成一维的数据,也就是将二维的经纬度转换成一维的字符串,方便对位置进行索引; 2、GeoHash特点 字符串越长,表示的范围越精确。5位的编码能表示10平方...
  • 基于百度/高德地图的一些应用经常会有这样一种场景的查询: 取X公里范围内最近的Y位司机/商户。 某公司是这样做的:司机有一张司机信息表DriverInfo,另有一张司机位置信息表DriverPosition。...
  • Element的安装及使用

    2019-07-01 20:41:46
    ①引入element-ui样式文件 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> ②引入Vue.js文件 <script src="https://unpkg.com/vue/dist/vue.js">&...
  • 今天接的前端模块突然在el-table表格里看到了这个ref="multipleTable",这个什么意思呢?找了很多网站都没有得到确切答案,而且还看到了ref="moviesTable
  • vue+element-ui实现表格编辑

    万次阅读 多人点赞 2018-07-24 14:59:37
    这种方式就是利用两标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上...
  • vue+element实现动态:根据后台返回的属性名和字段动态生成可变表格element表格使用插入链接与图片如何插入一段漂亮的代码片生成一适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一自定义...
  • 首先在template加如下代码 <el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">...
  • 代码中使用scoped之后,保证各文件中的css不相互影响,给每component都做了唯一的标记 解决方案如下 <style lang="less" scoped> //css用 //.el-table >>> .warning-row //less sass scss用 .el-...
  • element关于table拖拽排序问题

    万次阅读 2019-10-29 20:31:03
    element关于table拖拽排序问题
  • 一、Element UI中表格数据的新增 在Element UI中,实现新增操作,需要弹出一对话框,可以使用Dialog对话框组件。在data中,我们需要定义一数据dialogVisible,它的作用是控制添加用户对话框的显示与隐藏,默认...
  • 一、Element UI中表格数据的修改 在Element UI中,实现修改操作,需要弹出一对话框,可以使用Dialog对话框组件。在data中,我们需要定义一数据editDialogVisible,它的作用是控制添加用户对话框的显示与隐藏,...
  • element表格单选设置

    2020-03-30 14:06:46
    element表格单选设置 代码: <el-table ref="singleTable" :data="tableData" border highlight-current-row @current-change="handleCurrentChange" > <...
  • element-ui表格排序

    2019-08-27 14:37:40
    html <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%" size="medium" border @cell-click="transferId" ~~:defaul...
  • 代码的部分,借鉴了一下篇文章,有稍许自己的修改。 https://blog.csdn.net/Ms_alinda/article/details/102861781 通过属性解决的方法 <el-table :row-key="rowKey"> <el-table-column type=...
  • element-ui 带单选框的表格

    千次阅读 2018-03-14 18:04:00
    网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两的选择状态是不一致的,所以调整了一下 效果 代码 &lt;el-table ref="singleTable" :data=&...
  • element-UI表格的使用,实现多选和下拉框选择数据 目录实现效果使用步骤1.视图2.data2.method总结 实现效果 大致的展示效果就是这样,element-UI的表格,里面包含了内容选择和勾选 是接口返回的数据,其中...
  • vue elementui 表格搜索筛选栏组件封装

    千次阅读 2020-01-19 15:35:54
    vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每人写的样式都不相同,布局样式无法统一。 所以要考虑对搜索栏做...
  • element ui 表格提交时获取所有选中的checkbox的数据

    万次阅读 热门讨论 2017-08-02 19:09:05
    <el-table ref="multipleTable" :data="appList" border tooltip-effect="dark" style="width: 100%;height: 380px;overflow:auto" @selection-change="handleSelectionChange"> <el-table-column ty
  • elementui表格性能优化123

    千次阅读 2018-04-04 18:38:02
    最近公司需要使用vue重构以前的项目,为了节省时间快速开发选择了使用element不得不说,咋一看element的功能很全面样式,该有的都用,但是我们的项目对性能要求比较高,特别是表格开发过程比较顺利各功能实现都很不...

空空如也

1 2 3 4 5 ... 20
收藏数 1,001,983
精华内容 400,793
关键字:

element