会员管理小程序_vue+vux完成移动端文件上传样式

  • 栏目:公司新闻 时间:2021-01-11 15:47 分享新闻到:
<返回列表

vue+vux实现移动端文件上传样式       这篇文章主要介绍了vue+vux实现移动端文件上传样式,样式使用的是vux的cell组件,需要的朋友可以参考下

样式使用的是vux的cell组件 如下图的官方demo样子

上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type=‘file'  就可以拥有好看的样式的文件上传了

 !--引入组件-- 
import { Cell } from 'vux'
 !--官网的组件是这么写的-- 
 group 
 cell title="title" value="value" /cell 
 /group 

下面我们要改造cell变成我们想要的结果

 cell title="附件" @click.native.stop="openFile" 
 input type="file" @change="fileChange()" ref="file"multiple="multiple" 
 i /i 
 /cell 

解释一下:

@是v-on的缩写;在组建中调用原声clik要加native;stop解释不清楚,请读者百度

input相当于隐藏了,再也看不到那么丑陋的样式了

i标签是图片,使用了fontawesome的样式,在main.js里边引入

import '../node_modules/font-awesome/css/font-awesome.min.css'

如果不使用fontawesome也可以添加样式

 图标地址../../的形式");"

现在移动端的文件上传html+css已经写完了

js代码如下:

openFile(){
 this.$refs.file.click();
}

解释一下:

html中给input绑定了一个属性ref = ‘file' 我个人觉得相当于 给input赋值一个id

在通过this.$refs.file 就相当于document.getElementById('file'); 这个都是vue特有的功能;比较特别的dom操作

然后click()方法就会打开文件;

()方法待续!!!这个方法不大众化,需要单独写!

以上所述是小编给大家介绍的vue+vux实现移动端文件上传样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


分享新闻到:

更多阅读

会员管理小程序_vue+vux完成移动端文件上

公司新闻 2021-01-11
vue+vux完成手机端文档提交款式 本文关键详细介绍了vue+vux完成手机端文档提交款式,款式...
查看全文

营销型网站建设特点-成都网络推广有什么

公司新闻 2021-01-11
公司互联网SEO是当今十分受欢迎的营销推广方法,如今也是公司发展趋势中营销推广标准配置...
查看全文

想做微商城小程序_微信小程序支付及退款

公司新闻 2021-01-11
手机微信微信小程序付款及退钱步骤详细说明 最近在做手机微信微信小程序时,涉及到...
查看全文
返回全部新闻


区域站点: 南丰县自建免费网站   南宫市凡科网建站   囊谦县网站建设平台有哪些   南和县凡客建站   南华县自建免费网站   南江县凡科网建站   南京市网站建设平台有哪些   南靖县凡客建站   南康市自建免费网站   南乐县凡科网建站   南陵县网站建设平台有哪些   南宁市凡客建站   南平市自建免费网站   南皮县凡科网建站   南市区网站建设平台有哪些   南通市凡客建站   南投县自建免费网站   南雄市凡科网建站   南溪县网站建设平台有哪些   南阳市凡客建站   南漳县自建免费网站   南召县凡科网建站   南郑县网站建设平台有哪些   那坡县凡客建站   那曲县自建免费网站   纳雍县凡科网建站   讷河市网站建设平台有哪些   内黄县凡客建站   内江市自建免费网站   内丘县凡科网建站   内乡县网站建设平台有哪些   嫩江市凡客建站   聂荣县自建免费网站   尼玛县凡科网建站   尼木县网站建设平台有哪些   宁安市凡客建站   宁波市自建免费网站   宁城县凡科网建站   宁德市网站建设平台有哪些   宁都县凡客建站   宁国市自建免费网站   宁海县凡科网建站   宁化县网站建设平台有哪些   宁晋县凡客建站   宁陵县自建免费网站   宁明县凡科网建站   宁南县网站建设平台有哪些   宁强县凡客建站   宁陕县自建免费网站   宁武县凡科网建站   宁乡市网站建设平台有哪些   宁阳县凡客建站   宁远县自建免费网站   农安县凡科网建站   磐安县网站建设平台有哪些   盘锦市凡客建站   盘山县自建免费网站   磐石市凡科网建站   盘州市网站建设平台有哪些   蓬安县凡客建站   澎湖县自建免费网站   蓬莱市凡科网建站   彭山县网站建设平台有哪些   蓬溪县凡客建站   彭阳县自建免费网站   彭泽县凡科网建站   彭州市网站建设平台有哪些   偏关县凡客建站   平安县自建免费网站   平昌县凡科网建站   平定县网站建设平台有哪些   屏东县凡客建站   平度市自建免费网站   平果县凡科网建站   平和县网站建设平台有哪些   平湖市凡客建站   平江县自建免费网站   平乐县凡科网建站   平凉市网站建设平台有哪些   平利县凡客建站   平罗县自建免费网站   平陆县凡科网建站   屏南县网站建设平台有哪些   平泉市凡客建站   屏山县自建免费网站   平顺县凡科网建站   平塘县网站建设平台有哪些   平潭县凡客建站   平武县自建免费网站   萍乡市凡科网建站   平乡县网站建设平台有哪些   平阳县凡客建站   平遥县自建免费网站   平阴县凡科网建站   平邑县网站建设平台有哪些   平远县凡客建站   平舆县自建免费网站   皮山县凡科网建站   普安县网站建设平台有哪些   浦北县凡客建站   浦城县自建免费网站   普洱市凡科网建站   普格县网站建设平台有哪些   浦江县凡客建站   普兰县自建免费网站   普宁市凡科网建站   莆田市网站建设平台有哪些   迁安市凡客建站   乾安县自建免费网站   潜江市凡科网建站   潜山市网站建设平台有哪些  

友情链接: 自助建网站 小程序建站 企业建站 凡科建站登录 手机版

Copyright © 2002-2020 网站建设平台有哪些_凡客建站_自建免费网站_凡科网建站_怎么建设自己网站 版权所有 (网站地图) 备案号:粤ICP备10235580号