这段时间在做的东西,是北邮人论坛APP的注册页。这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。 在这过程中遇到了不少有意思的东西。DEMO的github地址在这里内容提要:meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探meta标签这点与在PC端写前端有着很大的区别,移动端的meta标签简直多。我就说说我所用到的标签。&l
什么是组件化开发 组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。 vue 是一个支持组件化开发的前端框架。 vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成,分别是: template -> 组件的模板结构 scr
配置 flexible安装 lib-flexible1.在命令行中运行如下安装:npm i lib-flexible --save2.在项目
转载
2023-01-03 15:05:51
285阅读
配置 flexible安装 lib-flexible1.在命令行中运行如下安装:npm i lib-flexible --save2.在项目入口文件 main.js 里 引入 lib-flexible引入 li
转载
2023-01-03 15:05:51
484阅读
(1) 简介该日历组件是一个应用于移动端的日历组件采用了rem(文末附有rem.js)(2) template<template>
<div class="calendar">
<div class="calendar-year">
<span @click="chooseYear">{{showDate.year}}</span&
css单位有3种:px:绝对单位em:相对父元素的单位rem:相对根元素(页面的html)的单位--css3新增的 下面来仔细讲下近年来在webapp中常用的rem:什么是rem?rem就是指相对根元素(页面html)的单位。例如:html设置了font-size为10px,那么1rem就是10px,2rem就是20pxhtml{
font-size:10px;
}
h1{
效果: 所具备的功能: 1、切换学年 2、项目单选 3、前端懒加载(前端分页) 4、打开弹框可以回显上一次选中的项目,点击取消不进行操作 5、通过isRadioChange控制,选中后,再次点击可取消 components/ProjectRadio.vue <template> <div class
原创
2022-05-02 10:34:00
951阅读
此案例使用的是vue2的@vue/composition-api,大部分代码来自 https://juejin.cn/post/6909252620741787656 此案例根据用户的屏幕宽度自适应为宽度100% vue和pdfjs版本 "vue": "^2.6.12", "pdfjs-dist": ...
转载
2021-10-19 11:48:00
976阅读
2评论
(一)移动端 常用组件库1)Vant ui?有赞移动 UI 组件库,支持 Vue2/3 小程序,支付宝小程序 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/col Vant 是由有赞前端团队开发的一套基于 Vue.js 的移动端 UI 组件库,它包含了丰富的组件和功能,可以帮助开发者快速构建高质量的移动应用。Vant 以简洁易用和高质量的代码为特点
vue项目pc端和移动端适配1、pc端适配一、样式中根据设计稿确定缩放比例(可以设置全局或者部分页面)二、监听窗口大小改变,设置根字体大小 created() {
// 获取当前设备的宽度,设置rem的根字体大小
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = d
效果: 所具备的功能: 1、支持分页,这里是接口支持的分页。推荐:vue基于vant封装上拉加载/下拉刷新组件ListScroller 2、支持搜索,这个也是接口支持的。搜索支持防抖 3、多选(可扩展成支持单选) 4、通过sync修饰符绑定父子组件传参 components/SelectUserPo
原创
2022-05-02 10:33:39
4176阅读
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一、npm 安装 // 当前最新版本 1.2.0 npm insta
转载
2019-12-20 17:52:00
347阅读
2评论
使用场景: 第一步:将js导入到项目文件夹中 第二步:在route文件夹的index.js中引用js文件import datePicker from "../../static/js/datePicker" 第三步:调用js方法,弹出时间选择器HTML:<input class="js-date-picker" type="text" placeho
1.更改 index.html 的<meta>属性<meta name="viewport" content="width=device-width,initial-scale=1.0, mi
原创
2022-06-21 20:04:20
63阅读
文章目录项目准备安装 amfe-flexible安装 第三方插件 postcss-pxtorem配置vue.config.jsreset.css 重置样式
原创
2022-12-21 21:47:13
7333阅读
配置之前首先要知道create-react-app创建的项目默认是不对外暴露配置信息的,所有的配置信息可以在node_modules/react-scripts下面看到 1. 安装flexible 1 npm i lib-flexible --save 2.安装 sass-loader node-s ...
转载
2021-08-07 22:43:00
745阅读
2评论
极简通用树组件,适用于通讯录组织树目录结构等,大数据量支持,毫秒级加载通用树组件Github:[地址](https://github.com/yangjingyu/vs-tree).功能点DEMO安装用法Vue useOptionscheckboxTypeOptionsradioTypevirtualOptionsbreadcrumb方法Node 方法EventsrenderContentloa