@foxit/vue-city-list

福昕翻译页面地址

翻译城市列表页面 demo

使用

// 安装
npm i @foxit/vue-city-list -S

// 使用
// CityJson：城市列表json数据
// CityList：vue城市列表组件
import { CityJson, CityList } from "@foxit/vue-city-list";

Vue.use(CityList);
<city-list></city-list>;

props 参数

• themeColor <String> 主题色 默认："#2c7df1"
• title <String> 标题 默认："文档在线翻译哪家好"
• urlPrefix <String> 城市点击跳转 url 前缀 默认：https://fanyi.pdf365.cn/city/
• urlSuffix <String> 城市点击跳转 url 后缀 默认："/"
• 默认点击城市名称跳转：https://fanyi.pdf365.cn/city/城市拼音/
• target <String> 跳转方式 默认："_blank"
• showAnchor <Boolean> 是否展示右侧锚点导航 默认：false

城市列表数据 city.json

// 可以通过 import { CityJson } from "@foxit/vue-city-list"; 导入使用
[
  {
    initial: "A",
    list: [
      {
        code: "010",
        name: "北京",
        pinyin: "beijing",
        label: "beijing010"
      },
      ...more
    ]
  }
];
// json使用 lodash 去重，避免出现城市同拼音跳转问题（例：抚州、福州）
import uniqBy from "lodash/uniqBy";
this.cityData.forEach(item => {
  item.list = uniqBy(item.list, "pinyin");
});