精华内容
下载资源
问答
  • uniapp如何引入官方css样式库

    千次阅读 2020-02-25 13:50:36
    uniapp引入css样式、图标库、动画库 uniapp如何引入官方css样式库 ...2.将样式库的css或者js复制到common文件夹 3.在App.vue引入需要的样式库 <script> export default { onLaunch: function() { co...

    uniapp引入css样式、图标库、动画库

    uniapp如何引入官方的css样式库

    1.项目目录新建一个common的文件夹

    common一般存放的是项目引入的一个css和js样式库
    

    2.将样式库的css或者js复制到common文件夹

    3.在App.vue中引入需要的样式库

    <script>
    export default {
    	onLaunch: function() {
    		console.log('App Launch');
    	},
    	onShow: function() {
    		console.log('App Show');
    	},
    	onHide: function() {
    		console.log('App Hide');
    	}
    };
    </script>
    
    <style>
    /*每个页面公共css */
    /* 引入hello模板公共样式库 */
    @import './common/uni.css';
    /* 引入animate动画库 */
    @import './common/animate.css';
    /* 引入图标 */
    @import './common/icon.css';
    </style>
    

    4.注意事项

    如果引入的是hello模板里面的uni.css样式库,则还需要拷贝static文件夹下的后缀名为.ttf的文件
    相应创建一个static文件夹,将文件放置到文件夹中,否则启动项目会报错。
    原因:uni.css中引入了uni.ttf
    @font-face {
    	font-family: uniicons;
    	font-weight: normal;
    	font-style: normal;
    	src: url('~@/static/uni.ttf') format('truetype');
    }
    

    uniapp如何引入的css图标库

    1.进入https://www.iconfont.cn/阿里巴巴矢量图标库

    2.如何下载图标

    选择你要使用的图标,点击购物车,加入完成后点击右上角购物车按钮,然后进入点击添加至项目
    取一个项目名然后进去之后会默认选择unicode,选择右边的下载至本地,然后下载过后解压文件
    里面有个iconfont.css文件拷贝到项目文件common文件夹中
    App.vue中@import './common/iconfont.css';
    

    3.如何使用图标

    解压的压缩包中有一个html文件,将html文件打开,里面有显示的图标,F12审查元素
    选择你要使用的图标,点击它,在底部查看他的类名,复制他的类名到项目标签中,即可使用。
    

    uniapp如何引入的css动画库

    1.进入https://daneden.github.io/animate.css/

    2.点击下方的下载

    3.下载好之后右键另存为animate.css将其复制到common文件夹中

    4.在App.vue中引入(同上)

    5.在class类名中添加相应的类名就可以引入相关的动画

    展开全文
  • jQuery中的 DOM 操作 查 查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 操作文本节点:通过 text() 方法 增 创建节点: ...

    jQuery中的 DOM 操作

    查找属性节点: 通过 jQuery 选择器完成.
    操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
    操作文本节点:通过 text() 方法
    

    创建节点: 
    使用 jQuery 的工厂函数 $(): $(html); 
    会根据传入的 html 标记字符串创建一个 DOM 对象, 
    并把这个 DOM 对象包装成一个 jQuery 对象返回.
    注意: 
    动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 
    当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 
    例如创建一个<p>元素, 可以使用 $(<p/>) 或 $(<p></p>), 
    但不能使用 $(<p>) 或 $(<P>)
    创建文本节点就是在创建元素节点时直接把文本内容写出来; 
    创建属性节点也是在创建元素节点时一起创建
    

    在这里插入图片描述
    在这里插入图片描述

    remove(): 
    从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 
    当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 
    这个方法的返回值是一个指向已被删除的节点的引用.
    empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
    

    练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
    	//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; 
    	//     检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
    	//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 
    	//需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. 
    	$(function() {
    
    		function showContent(li) {
    			alert($(li).text());
    		}
    		$("li").click(function() {
    			showContent(this);
    		});
    
    		//1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, 
    		//可以取消指定元素的默认行为. 比如 submit, a 等
    		//2. val() 方法, 相当于 attr("value"), 获取表单元素的 value 属性值. 
    		//3. $.trim(str): 可以去除 str 的前后空格.
    		//4. jQuery 对象的方法的连缀: 调用一个方法的返回值还是调用的对象, 于是可以
    		//在调用方法的后面依然调用先前的那个对象的其他方法. 
    		$(":submit").click(
    				function() {
    
    					var $type = $(":radio[name='type']:checked");
    					if ($type.length == 0) {
    						alert("请选择类型.");
    						return false;
    					}
    					var type = $type.val();
    					var $name = $(":text[name='name']");
    					var name = $name.val();
    					//$.trim(str): 可以去除 str 的前后空格.
    					name = $.trim(name);
    					$name.val(name);
    					if (name == "") {
    						alert("请输入内容");
    						return false;
    					}
    					$("<li>" + name + "</li>").appendTo($("#" + type)).click(
    							function() {
    								showContent(this);
    							});
    					//取消 submit 的默认行为
    					return false;
    				});
    	})
    </script>
    </head>
    <body>
    	<p>你喜欢哪个城市?</p>
    	<ul id="city">
    		<li id="bj">北京</li>
    		<li>上海</li>
    		<li>东京</li>
    		<li>首尔</li>
    	</ul>
    	<br>
    	<br>
    	<p>你喜欢哪款单机游戏?</p>
    	<ul id="game">
    		<li id="rl">红警</li>
    		<li>实况</li>
    		<li>极品飞车</li>
    		<li>魔兽</li>
    	</ul>
    	<br>
    	<br>
    	<form action="dom-7.html" name="myform">
    
    		<input type="radio" name="type" value="city">城市 <input
    			type="radio" name="type" value="game">游戏 name: <input
    			type="text" name="name" /> <input type="submit" value="Submit"
    			id="submit" />
    	</form>
    </body>
    </html>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
     $(function(){
    	 //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话
    	 //那么这个对象一定是一个 jQuery 对象
    	 //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象
    	 function removeTr(aNoe){
    		 //获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象
    		 var $trNode = $(aNoe).parent().parent();
    		 var textContent = $trNode.find("td:first").text();
    		 textContent = $.trim(textContent);
    		 var flag = confirm("确定要删除" + textContent + "的信息吗?");
    		 if(flag){
    			 $trNode.remove();
    		 }
    		 return false;
    	 }
    	 $("#employeetable a").click(function(){
    		 return removeTr(this);
    	 });
    	 $("#addEmpButton").click(function(){
    		 $("<tr></tr>").append("<td>" + $("#name").val() + "</td>")
    		               .append("<td>" + $("#email").val() + "</td>")
    		               .append("<td>" + $("#salary").val() + "</td>")
    		               .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>")
    		               .appendTo("#employeetable tbody")
    		               .find("a")
    			               .click(function(){
    			            	   return removeTr(this)
    			               });
    	 });
     })
    </script>
    </head>
    <body>
    	<center>
    		<br> <br> 添加新员工 <br> <br> name: <input type="text"
    			name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
    			name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
    			name="salary" id="salary" /> <br> <br>
    		<button id="addEmpButton" value="abc">Submit</button>
    		<br> <br>
    		<hr>
    		<br> <br>
    		<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
    			<tbody>
    				<tr>
    					<th>Name</th>
    					<th>Email</th>
    					<th>Salary</th>
    					<th>&nbsp;</th>
    				</tr>
    				<tr>
    					<td>Tom</td>
    					<td>tom@tom.com</td>
    					<td>5000</td>
    					<td><a href="deleteEmp?id=001">Delete</a></td>
    				</tr>
    				<tr>
    					<td>
    						Jerry
    					</td>
    					<td>jerry@sohu.com</td>
    					<td>8000</td>
    					<td><a href="deleteEmp?id=002">Delete</a></td>
    				</tr>
    				<tr>
    					<td>Bob</td>
    					<td>bob@tom.com</td>
    					<td>10000</td>
    					<td><a href="deleteEmp?id=003">Delete</a></td>
    				</tr>
    			</tbody>
    		</table>
    	</center>
    </body>
    </html>
    

    复制和替换

    clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
    clone(true): 复制元素的同时也复制元素中的的事件 
    注意:
    //复制 #bj 节点, 并添加到 #rl 节点的后面
    	/*
    	1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id
    	属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.
    	2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. 
    	*/
    	$("#bj").clone(true)
    	        .attr("id", "bj2")
    	        .insertAfter($("#rl"));
    
    replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
    replaceAll(): 颠倒了的 replaceWith() 方法.
    注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
    以上的两个方法还有移动节点的功能
    节点互换需要先克隆节点.
    
    这是用bj2来替换rl,返回的是被替换的节点的引用就是rl节点的引用
    var $rl = $("#rl").replaceWith($bj2);
    

    包裹节点

    wrap(): 将指定节点用其他标记包裹起来. 
    	该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义.
    wrapAll(): 将所有匹配的元素用一个元素来包裹.wrap() 方法是将所有的元素进行单独包裹.
    wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
    	//测试使用 jQuery wrap, wrapAll, wrapInner
    	$(function() {
    		//包装 li 本身
    		$("#game li").wrap("<font color='red'></font>");
    		//包装所有的 li
    		$("#city li").wrapAll("<font color='red'></font>");
    		//包装 li 里边的文字. 
    		$("#language li").wrapInner("<font color='red'></font>");
    	})
    </script>
    </head>
    <body>
    	<p>你喜欢哪个城市?</p>
    	<ul id="city">
    		<li id="bj" name="BeiJing">北京</li>
    		<li>上海</li>
    		<li id="dj">东京</li>
    		<li id="se">首尔</li>
    	</ul>
    
    	<br>
    	<br>
    	<p>你喜欢哪款单机游戏?</p>
    	<ul id="game">
    		<li id="rl">红警</li>
    		<li>实况</li>
    		<li>极品飞车</li>
    		<li>魔兽</li>
    	</ul>
    	<br>
    	<br>
    	<p>你喜欢哪种开发语言?</p>
    	<ul id="language">
    		<li>C</li>
    		<li>Java</li>
    		<li>.NET</li>
    		<li>PHP</li>
    	</ul>
    	<br>
    	<br> gender:
    	<input type="radio" name="gender" value="male" />Male
    	<input type="radio" name="gender" value="female" />Female
    	<br>
    	<br> name:
    	<input type="text" name="username" value="atguigu" />
    </body>
    </html>
    

    属性操作

    attr(): 获取属性和设置属性
    当为该方法传递一个参数时, 即为某元素的获取指定属性
    当为该方法传递两个参数时, 即为某元素设置指定属性的值
    jQuery 中有很多方法都是一个函数实现获取和设置.: attr(), html(), text(), val(), height(), width(), css().
    removeAttr(): 删除指定元素的指定属性
    
    读取和设置某个元素中的 HTML 内容: html() . 
    	该方法可以用于 XHTML, 但不能用于 XML 文档
    读取和设置某个元素中的文本内容: text(). 
    	该方法既可以用于 XHTML 也可以用于 XML 文档.
    读取和设置某个元素中的值: val() --- 
    	该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 
    	单选框该方法可返回元素的值(多选框只能返回第一个值).
    	如果为多选下拉列表框, 则返回一个包含所有选择值的数组
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Untitled Document</title>
    		<script type="text/javascript" src="jquery-1.7.2.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数
    				$(":text").focus(function(){
    					//2. 当获取焦点时, 若 #address 中是默认值
    					//(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""
    					var val = $(this).val();
    					if(val == this.defaultValue){
    						$(this).val("");
    					}
    				}).blur(function(){
    					//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""
    					//则为其恢复默认值. 
    					var val = this.value;	
    					if($.trim(val) == ""){
    						this.value = this.defaultValue;
    					}
    				});
    				
    				//2. 
    				$(":button:eq(1)").click(function(){
    					$("#single").val("选择3号");
    				});
    				
    				$(":button:eq(2)").click(function(){
    					$("#multiple").val(["选择2号", "选择4号"]);				
    				});
    								
    				$(":button:eq(3)").click(function(){
    					$(":checkbox[name='c']").val(["check2", "check4"]);
    				});
    				
    				$(":button:eq(4)").click(function(){
    					//即便是为一组 radio 赋值, val 参数中也应该使用数组. 
    					//使用一个值不起作用。 
    					$(":radio[name='r']").val(["radio2"]);
    				});
    				$(":button:eq(5)").click(function(){
    					//val() 可以直接获取 select 的被选择的值. 
    					alert($("#single").val());
    					alert($("#multiple").val());
    					//val 不能直接获取 checkbox 被选择的值
    					//若直接获取, 只能得到第一个被选择的值. 
    					//因为 $(":checkbox[name='c']:checked") 得到的是一个
    					//数组. 而使用 val() 方法只能获取数组元素的第一个值
    					//若希望打印被选择的所有制, 需要使用 each 遍历. 
    					//alert($(":checkbox[name='c']:checked").val());
    					$(":checkbox[name='c']:checked").each(function(){
    						alert(this.value);
    					});
    					//而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. 
    					alert($(":radio[name='r']:checked").val());
    				});
    			})
    		</script>
    	</head>
    	<body>
    		<input type="text" id="address" value="请输入邮箱地址"><br>
    		<input type="text" id="password" value="请输入邮箱密码"><br>
    		<input type="button" value="登录">
    		<br><br><br>
    		<input type="button" value="使单选下拉框的'选择3号'被选中"/>
    		<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
    		<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
    		<input type="button" value="使单选框的'单选2'被选中"/><br>
    		<input type="button" value="打印已经被选中的值"><br>
    		<br/>
    		<select id="single">
    		  <option>选择1</option>
    		  <option>选择2</option>
    		  <option>选择3</option>
    		</select>
    		<select id="multiple" multiple="multiple" style="height:120px;">
    		  <option selected="selected">选择1</option>
    		  <option>选择2</option>
    		  <option>选择3</option>
    		  <option>选择4</option>
    		  <option selected="selected">选择5</option>
    		</select>
    		<br/><br/>
    		<input type="checkbox" name="c" value="check1"/> 多选1
    		<input type="checkbox" name="c" value="check2"/> 多选2
    		<input type="checkbox" name="c" value="check3"/> 多选3
    		<input type="checkbox" name="c" value="check4"/> 多选4
    		<br/>
    		<input type="radio" name="r" value="radio1"/> 单选1
    		<input type="radio" name="r"  value="radio2"/> 单选2
    		<input type="radio" name="r"  value="radio3"/> 单选3
    	</body>
    </html>
    

    样式操作

    获取 class 和设置 class : class 是元素的一个属性, 
    所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
    追加样式: addClass() 
    移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
    切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 
    							如果类名不存在则添加它.
    判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 
    							如果有, 则返回 true; 否则返回 false
    
    获取和设置元素的样式属性: css()
    获取和设置元素透明度: opacity 属性
    获取和设置元素高度, 宽度: height(), width(). 在设置值时, 
    	若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 
    	例如 $(“p:first”).height(2em”);
    获取元素在当前视窗中的相对位移: offset(). 
    	其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-size: 12px;
    	text-align: center;
    }
    
    a {
    	color: #04D;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #F50;
    	text-decoration: underline;
    }
    
    .SubCategoryBox {
    	width: 600px;
    	margin: 0 auto;
    	text-align: center;
    	margin-top: 40px;
    }
    
    .SubCategoryBox ul {
    	list-style: none;
    }
    
    .SubCategoryBox ul li {
    	display: block;
    	float: left;
    	width: 200px;
    	line-height: 20px;
    }
    
    .showmore {
    	clear: both;
    	text-align: center;
    	padding-top: 10px;
    }
    
    .showmore a {
    	display: block;
    	width: 120px;
    	margin: 0 auto;
    	line-height: 24px;
    	border: 1px solid #AAA;
    }
    
    .showmore a span {
    	padding-left: 15px;
    	background: url(img/down.gif) no-repeat 0 0;
    }
    
    .promoted a {
    	color: #F50;
    }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>
    <script type="text/javascript">
    	$(function() {
    
    		//测试 jQuery 样式相关的方法. 
    
    		//1. hasClass(): 某元素是否有指定的样式
    		alert($("div:first").hasClass("SubCategoryBox")); //true
    
    		//2. 移除样式
    		$("div:first").removeClass("SubCategoryBox");
    
    		alert($("div:first").hasClass("SubCategoryBox"));
    
    		//3. 添加样式
    		$("div:first").addClass("SubCategoryBox");
    
    		//4. 切换样式: 存在, 则去除; 没有, 则添加. 
    		$(".showmore").click(function() {
    			$("div:first").toggleClass("SubCategoryBox");
    			return false;
    		});
    
    		//5. 获取和设置元素透明度: opacity 属性
    		alert($("div:first").css("opacity"));
    
    		$("div:first").css("opacity", 0.5);
    
    		//6. width 和 height
    		alert($("div:first").width());
    		alert($("div:first").height());
    
    		$("div:first").width(400);
    		$("div:first").height(80);
    
    		//7. 获取元素在当前视窗中的相对位移: offset(). 
    		//其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
    		alert($("div:first").offset().top);
    		alert($("div:first").offset().left);
    
    	});
    </script>
    </head>
    <body>
    	<div class="SubCategoryBox">
    		<ul>
    			<li><a href="#">佳能</a><i>(30440) </i></li>
    			<li><a href="#">索尼</a><i>(27220) </i></li>
    			<li><a href="#">三星</a><i>(20808) </i></li>
    			<li><a href="#">尼康</a><i>(17821) </i></li>
    			<li><a href="#">松下</a><i>(12289) </i></li>
    			<li><a href="#">卡西欧</a><i>(8242) </i></li>
    			<li><a href="#">富士</a><i>(14894) </i></li>
    			<li><a href="#">柯达</a><i>(9520) </i></li>
    			<li><a href="#">宾得</a><i>(2195) </i></li>
    			<li><a href="#">理光</a><i>(4114) </i></li>
    			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
    			<li><a href="#">明基</a><i>(1466) </i></li>
    			<li><a href="#">爱国者</a><i>(3091) </i></li>
    			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
    		</ul>
    		<div class="showmore">
    			<a href="more.html"><span>显示全部品牌</span></a>
    		</div>
    	</div>
    </body>
    </html>
    
    展开全文
  • 找到要设置样式的类名,直接按照下面写法设置就可以了! <style lang="less" scoped> @deep: ~'>>>'; @{deep}.ivu-transfer-operation { visibility: hidden !important; } </style> 复制代码...

    找到要设置样式的类名,直接按照下面写法设置就可以了!

    <style lang="less" scoped>
    @deep: ~'>>>';
    @{deep}.ivu-transfer-operation {
        visibility: hidden !important;
    }
    </style>
    复制代码

    转载于:https://juejin.im/post/5ce3a29f6fb9a07eff005cdf

    展开全文
  • 打开Hello uni-app项目中的App.vue文件,复制以下内容到我们自己需要引入css样的项目中的App.vue文件。 在Hello uni-app项目中把上面引入的uni.css文件复制到我们的项目中,同样自己新建一个common目录,把它放到...

    引入官方css样式库

    • 创建官方演示模板Hello-uniapp
      在这里插入图片描述
    • 打开Hello uni-app项目中的App.vue文件,复制以下内容到我们自己需要引入css样库的项目中的App.vue文件。
      在这里插入图片描述
    • 在Hello uni-app项目中把上面引入的uni.css文件复制到我们的项目中,同样自己新建一个common目录,把它放到里面。
      在这里插入图片描述

    高效开发技巧

    https://uniapp.dcloud.io/snippet

    Iconfont 官网

    1.首先在官网登录注册,选择你需要的图标加入购物车,可以多选

    在这里插入图片描述

    2.新建项目,把购物车中的图标添加到项目,然后下载到本地

    在这里插入图片描述

    3.解压后的文件如图所示,复制iconfont.css文件,粘贴到我们项目的common目录下,重命名为icon.css

    在这里插入图片描述

    4.打开我们复制过来的css文件,把里面引用了但是我们没有复制过来的文件的那几行删除掉,我们一般不需要用到。

    在这里插入图片描述
    留下data那一行,结尾用分号结束
    在这里插入图片描述

    5.在App.vue文件的style中引入

    /* icon.css - 自定义图标库 */
    	@import './common/icon.css';
    12
    

    6.在页面中使用

    找到之前解压的文件,里面有一个demo的html文件,在浏览器中打开,选择font-class
    在这里插入图片描述
    在页面单击右键,检查
    在这里插入图片描述
    复制class中的内容,用到我们需要引入该图标的页面中,如下
    在这里插入图片描述
    运行即可显示。

    展开全文
  • 一、获取官方CSS样式库文件 第一步:在空白处,鼠标右键新建项目 ...第三步:将官方CSS样式库复制到common文件夹 第四步:引入官方CSS样式库文件,并复制uni.ttf文件,即可 ...
  • bootstrap里面可以复制你想要的样式组件,官方有介绍怎么使用,不过本人稍微修改了下使用ngx-bootstrap的步骤1、npm install ngx-bootstrap –save2、npm install bootstarap –save-dev3、在angular-cli.json文件...
  • 当我们想修改组件默认的样式时,一般是通过F12控制台,定位到需要修改的DOM元素,然后找到它对应的class,然后复制去我们对应代码的 css/less 文件重写覆盖原有的组件样式。 // 重写组件样式,高度修改为0 .ant-...
  • scoped看起来很好用,当时在Vue项目,当我们引入第三方组件时(如使用element-ui),需要在局部组件修改第三方组件样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透...
  • @问题描述:接口、数据库返回信息有中文的时候会显示unicode的样式,如图 解决方法: 1、robotframework为3.0.X 2、找到python安装目录下的\Lib\site-packages\robot\utils\unic.py文件 引入json:import json 将...
  • 将现有软件包package.json之一复制到新文件夹,并调整值。 针对外部应用程序进行本地开发 为了使外部前端本地副本可以使用这些软件包之一本地副本(例如@ growflow / eslint-config),我们必须在本地...
  • 注意:第一:在配置依赖时先在setting检查是否是自己本地 第二:对于出错(爆红)依赖解决方案 (1)将出错依赖剪切再复制 然后刷新 (2)以上不能解决将出错依赖删除,在mvcproperties官网 找 相 应 ...
  • scoped看起来很好用,当时在Vue项目,当我们引入第三方组件时(如使用element-ui),需要在局部组件修改第三方组件样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透...
  • 第一次(2019年4月底)安装Hexo时候使用貌似是5.X版本,在当时魔改过程发现该版本无法完美添加代码复制的按钮,于是在第二次部署时候特意更换了7.1.1版本,测试代码复制按钮通过以后就开始魔改其他...
  • weexcss样式相关

    2018-04-25 06:15:28
    阿里提供UIweex引入css方式行内样式内联在vue文件style标签&lt;style&gt; html{ background-color: #f00; } &lt;/style&gt; 复制代码利用style标签src属性导入&lt;style ...
  • .vue文件怎么请求api.vue文件怎么请求api1、首先我们安装axios网络请求cdtest//进入项目根目录 npmiaxios-S//执行安装2、在需要使用请求vue组件内,引入axios 请求示例 //引.vue文件怎么引入本地图片.vue文件...
  • 主题上下文故事书复制 此仓库是描述的错误的再现。 概述 此回购协议主要受和而有所调整。 它包含了: React本机Web React导航 打字稿 故事书 样式化的组件 ... 样式组件中的theme对象是空的,因此为
  • 下面跟我一起入手吧! ... checkout from version contril ---->...2、去git远程仓库复制git项目路径,注意:路径是http (https://github.com/wxxx/xxxx.git) ,还是ssh(git@github.com:wxxxx/xxxx.git) ) 3,...
  • 在现在前端开发,为了开发效率,大都会引入第三方加快开发速度。查阅官方文档,一顿复制黏贴,是,这就是面向百度、面向谷歌编程,但是基础总是重要——本文章记录一下之前遇到小坑,并对其进行解析。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 391
精华内容 156
关键字:

复制样式库中的样式