Cheng

Appearance

项目引用配置 ​

移动端适配 ​

原理是通过改变根元素字体的大小, 控制 rem 大小

js
// 获取屏幕宽度
const screenWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (screenWidth / 750) * 100 + "px";

在 Vue 中使用 ​

1. 安装依赖 ​

sh
npm i lib-flexible postcss-pxtorem -S

2. 入口文件引入 ​

js
//main.js
import "lib-flexible";

3. 配置 postcss-pxtorem ​

在根路径下新建 postcss.config.js 文件, 并做如下配置

js
module.exports = {
  plugins: {
    //...
    autoprefixer: {
      browsers: ["Android >= 4.0", "iOS >= 7"],
    },
    "postcss-pxtorem": {
      rootValue: 37.5, //根据设计图尺寸写，设计图是750，就写75
      propList: ["*"], // 需要被转换的属性
      selectorBlackList: [], // 不进行px转换的选择器
    },
  },
};

国际化引入 ​

  1. 安装依赖

    sh
    npm i vue-i18n@next

  2. 创建文件目录

    text
    src
└── i18n
├── languages # 语言对应文件
│ ├── zh.js
│ └── en.js
└── index.js # 配置文件

  3. 语言管理

    js
    //zh.js
//中文对应的语言，其他语言按照格式依次写入
export default {
  message: {
    Home: "首页",
    About: "关于我们",
    productService: "产品服务",
    cases: "行业解决方案",
    news: "新闻动态",
    contactUs: "联系我们",
  },
};

  4. 配置信息

    js
    // i18n/index
import en from "./languages/en";
import zh from "./languages/zh";
import { createI18n } from "vue-i18n"; //引入vue-i18n组件

const i18n = createI18n({
  fallbackLocale: "zh",
  globalInjection: true, //必须设置为true，挂载全局，否则使用报错
  legacy: false, // you must specify 'legacy: false' option
  locale: localStorage.lang || "zh", //防止刷新
  messages: {
    en,
    zh,
  },
});

export default i18n;

  5. 入口文件使用

    js
    // main.js
import { createApp } from "vue";
import App from "./App.vue";
import i18n from "@/i18n/index.js";

const app = createApp(App);
app.use(i18n);
app.mount("#app");

  6. 模板组件使用

    vue
    <p>{{$t(`message.Home`)}}</p>

//语言切换
<el-button @click="changeLan('zh')">切换中文</el-button>
<el-button @click="changeLan('en')">切换英文</el-button>

<script setup>
import { getCurrentInstance } from "vue";
//获取组件实例上下文
const { proxy } = getCurrentInstance();
console.log(proxy); //$attrs、$data、$emit、$el、$refs...

const changeLan = (lan) => {
  proxy.$i18n.locale = lan;
};
</script>

  7. js 引用

    js
    import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();
console.log(proxy.$t("message.test"));

ali-iconfont 引用 ​

1. symbol ​

  • 支持多色图标
  • 支持像字体一样调整 font-size，color 等样式
  • 兼容性差：>ie9+
  • 浏览器渲染一般

使用步骤: ​

  1. 拷贝项目下面生成的 symbol 代码

    js
    <script src="//at.alicdn.com/t/font_2300456_rtcbrk8mma.js"></script>

  2. 添加通用 css 样式

    css
    <style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

  3. 挑选相应图标并获取类名，应用于页面

    html
    <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

2. unicode ​

  • 兼容性好，支持 ie6
  • 支持按字体的样式调整大小、颜色
  • 不支持多色

使用步骤 ​

  1. 拷贝项目下面生成的 font-face(定义字体样式,及引用它的字体名称 'iconfont')

    js
    @font-face {font-family: 'iconfont';
	src: url('iconfont.eot');
	src: url('iconfont.eot?#iefix') format('embedded-opentype'),
	url('iconfont.woff') format('woff'),
	url('iconfont.ttf') format('truetype'),
	url('iconfont.svg#iconfont') format('svg');
}

  2. 定义使用 iconfont 的样式(class 类名随便定义，引用需一致)

    css
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

  3. 挑选相应图标并获取字体编码，应用于页面

    html
    <i class="iconfont">&#x33;</i>

3. font-class ​

  • 兼容性良好，>ie8+
  • 语意明确，书写直观，易于分辨
  • 不支持多色

使用步骤 ​

  1. 拷贝项目下面生成的 fontclass 代码

    js
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2300456_rtcbrk8mma.css">

  2. 选相应图标并获取类名，应用于页面

    html
    <i class="iconfont icon-xxx"></i>