This commit is contained in:
parent
5da46d7230
commit
84d02b5a48
49
lang/index.js
Normal file
49
lang/index.js
Normal file
@ -0,0 +1,49 @@
|
||||
|
||||
// 导入国际化JSON文件
|
||||
import langJSON from './index.json'
|
||||
(function () {
|
||||
// 定义翻译函数
|
||||
let $t = function (key, val, nameSpace) {
|
||||
// 获取指定命名空间下的语言包
|
||||
const langPackage = $t[nameSpace];
|
||||
// 返回翻译结果，如果不存在则返回默认值
|
||||
return (langPackage || {})[key] || val;
|
||||
};
|
||||
// 定义简单翻译函数，直接返回传入的值
|
||||
let $$t = function (val) {
|
||||
return val;
|
||||
};
|
||||
// 定义设置语言包的方法
|
||||
$t.locale = function (locale, nameSpace) {
|
||||
// 将指定命名空间下的语言包设置为传入的locale
|
||||
$t[nameSpace] = locale || {};
|
||||
};
|
||||
// 将翻译函数挂载到window对象上，如果已经存在则使用已有的
|
||||
window.$t = window.$t || $t;
|
||||
// 将简单翻译函数挂载到window对象上
|
||||
window.$$t = $$t;
|
||||
// 定义从JSON文件中获取指定键的语言对象的方法
|
||||
window._getJSONKey = function (key, insertJSONObj = undefined) {
|
||||
// 获取JSON对象
|
||||
const JSONObj = insertJSONObj;
|
||||
// 初始化语言对象
|
||||
const langObj = {};
|
||||
// 遍历JSON对象的所有键
|
||||
Object.keys(JSONObj).forEach((value) => {
|
||||
// 将每个语言的对应键值添加到语言对象中
|
||||
langObj[value] = JSONObj[value][key];
|
||||
});
|
||||
// 返回语言对象
|
||||
return langObj;
|
||||
};
|
||||
})();
|
||||
// 定义语言映射对象
|
||||
const langMap = {
|
||||
'en': window?.lang?.en || window._getJSONKey('en', langJSON),
|
||||
'zhcn': window?.lang?.zhcn || window._getJSONKey('zhcn', langJSON)
|
||||
};
|
||||
// 从本地存储中获取当前语言，如果不存在则使用源语言
|
||||
const lang = window.localStorage.getItem('lang') || 'zhcn';
|
||||
// 根据当前语言设置翻译函数的语言包
|
||||
window.$t.locale(langMap[lang], 'lang');
|
||||
|
||||
594
lang/index.json
Normal file
594
lang/index.json
Normal file
@ -0,0 +1,594 @@
|
||||
{
|
||||
"uy435p7": {
|
||||
"zh-cn": "不合法的日期！",
|
||||
"en": "Not a legal date!"
|
||||
},
|
||||
"ezwpt3": {
|
||||
"zh-cn": "控制台",
|
||||
"en": "Control console"
|
||||
},
|
||||
"qylb2": {
|
||||
"zh-cn": "首页",
|
||||
"en": "Home page"
|
||||
},
|
||||
"a6u45a4": {
|
||||
"zh-cn": "个人信息",
|
||||
"en": "Personal information"
|
||||
},
|
||||
"f6s8tw4": {
|
||||
"zh-cn": "画廊管理",
|
||||
"en": "Gallery management"
|
||||
},
|
||||
"dblh1a4": {
|
||||
"zh-cn": "文章管理",
|
||||
"en": "Article management"
|
||||
},
|
||||
"c5bzqr4": {
|
||||
"zh-cn": "导航管理",
|
||||
"en": "Navigation management"
|
||||
},
|
||||
"hbwz2": {
|
||||
"zh-cn": "我的",
|
||||
"en": "mine"
|
||||
},
|
||||
"ruu752a": {
|
||||
"zh-cn": "登录过期，请重新登录",
|
||||
"en": "Login expired, please login again"
|
||||
},
|
||||
"iifi5w4": {
|
||||
"zh-cn": "退出登录",
|
||||
"en": "Log out"
|
||||
},
|
||||
"ogvk2": {
|
||||
"zh-cn": "设置",
|
||||
"en": "Settings"
|
||||
},
|
||||
"klpb2": {
|
||||
"zh-cn": "登出",
|
||||
"en": "Log out"
|
||||
},
|
||||
"1pdhetd": {
|
||||
"zh-cn": "已退出登录，是否重新登录？",
|
||||
"en": "You have logged out. Do you want to log in again?"
|
||||
},
|
||||
"koca2": {
|
||||
"zh-cn": "登录",
|
||||
"en": "Log in"
|
||||
},
|
||||
"dh0cd3": {
|
||||
"zh-cn": "回首页",
|
||||
"en": "Return to Home page"
|
||||
},
|
||||
"mvw92": {
|
||||
"zh-cn": "菜单",
|
||||
"en": "menu"
|
||||
},
|
||||
"kgkv2": {
|
||||
"zh-cn": "画廊",
|
||||
"en": "gallery"
|
||||
},
|
||||
"hxyx2": {
|
||||
"zh-cn": "文章",
|
||||
"en": "article"
|
||||
},
|
||||
"gf1u2": {
|
||||
"zh-cn": "工具",
|
||||
"en": "tool"
|
||||
},
|
||||
"n74l2": {
|
||||
"zh-cn": "菜谱",
|
||||
"en": "menu"
|
||||
},
|
||||
"f2j72": {
|
||||
"zh-cn": "友链",
|
||||
"en": "Friend link"
|
||||
},
|
||||
"cxhqd3": {
|
||||
"zh-cn": "合肥市",
|
||||
"en": "Hefei City"
|
||||
},
|
||||
"me3eq06": {
|
||||
"zh-cn": "安徽省合肥市",
|
||||
"en": "Hefei City, Anhui Province"
|
||||
},
|
||||
"dvhp2": {
|
||||
"zh-cn": "上海",
|
||||
"en": "Shanghai"
|
||||
},
|
||||
"pbh52": {
|
||||
"zh-cn": "重庆",
|
||||
"en": "Chongqing"
|
||||
},
|
||||
"ekc52": {
|
||||
"zh-cn": "北京",
|
||||
"en": "Peking"
|
||||
},
|
||||
"frj02": {
|
||||
"zh-cn": "天津",
|
||||
"en": "Tianjin"
|
||||
},
|
||||
"pb17pff": {
|
||||
"zh-cn": "准备一个容器用来存放音乐播放器",
|
||||
"en": "Prepare a container to store your music player"
|
||||
},
|
||||
"lg3e2": {
|
||||
"zh-cn": "立春",
|
||||
"en": "Beginning of Spring"
|
||||
},
|
||||
"q9fw2": {
|
||||
"zh-cn": "雨水",
|
||||
"en": "rainwater"
|
||||
},
|
||||
"h7c62": {
|
||||
"zh-cn": "惊蛰",
|
||||
"en": "The Awakening of Insects"
|
||||
},
|
||||
"htoh2": {
|
||||
"zh-cn": "春分",
|
||||
"en": "Vernal equinox"
|
||||
},
|
||||
"j9ux2": {
|
||||
"zh-cn": "清明",
|
||||
"en": "Clear and bright"
|
||||
},
|
||||
"ooep2": {
|
||||
"zh-cn": "谷雨",
|
||||
"en": "Grain rain"
|
||||
},
|
||||
"ldic2": {
|
||||
"zh-cn": "立夏",
|
||||
"en": "Beginning of Summer (12th solar term)"
|
||||
},
|
||||
"g9ma2": {
|
||||
"zh-cn": "小满",
|
||||
"en": "Lesser fullness"
|
||||
},
|
||||
"mvln2": {
|
||||
"zh-cn": "芒种",
|
||||
"en": "Grain in ear"
|
||||
},
|
||||
"fv0k2": {
|
||||
"zh-cn": "夏至",
|
||||
"en": "Summer solstice"
|
||||
},
|
||||
"g7z62": {
|
||||
"zh-cn": "小暑",
|
||||
"en": "Slight Heat (12th solar term)"
|
||||
},
|
||||
"fq6i2": {
|
||||
"zh-cn": "大暑",
|
||||
"en": "Great Heat (12th solar term)"
|
||||
},
|
||||
"ljz42": {
|
||||
"zh-cn": "立秋",
|
||||
"en": "Autumn begins"
|
||||
},
|
||||
"fpcd2": {
|
||||
"zh-cn": "处暑",
|
||||
"en": "The End of Heat (12th solar term)"
|
||||
},
|
||||
"kzf92": {
|
||||
"zh-cn": "白露",
|
||||
"en": "White dew"
|
||||
},
|
||||
"l5zv2": {
|
||||
"zh-cn": "秋分",
|
||||
"en": "Autumnal equinox"
|
||||
},
|
||||
"gg4g2": {
|
||||
"zh-cn": "寒露",
|
||||
"en": "Cold dew"
|
||||
},
|
||||
"qj012": {
|
||||
"zh-cn": "霜降",
|
||||
"en": "Frost Descends"
|
||||
},
|
||||
"lc1t2": {
|
||||
"zh-cn": "立冬",
|
||||
"en": "Beginning of Winter (beginning of Winter)"
|
||||
},
|
||||
"ghiz2": {
|
||||
"zh-cn": "小雪",
|
||||
"en": "Light snow"
|
||||
},
|
||||
"fzqb2": {
|
||||
"zh-cn": "大雪",
|
||||
"en": "Heavy snow"
|
||||
},
|
||||
"els72": {
|
||||
"zh-cn": "冬至",
|
||||
"en": "Winter Solstice Festival"
|
||||
},
|
||||
"g5ur2": {
|
||||
"zh-cn": "小寒",
|
||||
"en": "Lesser Cold (10th solar term)"
|
||||
},
|
||||
"fo232": {
|
||||
"zh-cn": "大寒",
|
||||
"en": "Great Cold (12th solar term)"
|
||||
},
|
||||
"mry635g": {
|
||||
"zh-cn": "YYYY 年 MM 月 DD 日",
|
||||
"en": "YYYY MM month DD day"
|
||||
},
|
||||
"ab9f5p4": {
|
||||
"zh-cn": "今天就是",
|
||||
"en": "Today is"
|
||||
},
|
||||
"gva1": {
|
||||
"zh-cn": "啦",
|
||||
"en": "!"
|
||||
},
|
||||
"p1692": {
|
||||
"zh-cn": "还有",
|
||||
"en": "In addition"
|
||||
},
|
||||
"didqf3": {
|
||||
"zh-cn": "天就是",
|
||||
"en": "God is it."
|
||||
},
|
||||
"fie1": {
|
||||
"zh-cn": "了",
|
||||
"en": "the"
|
||||
},
|
||||
"ino1": {
|
||||
"zh-cn": "年",
|
||||
"en": "years"
|
||||
},
|
||||
"gzcu2": {
|
||||
"zh-cn": "宜：",
|
||||
"en": "Preferably:"
|
||||
},
|
||||
"hozy2": {
|
||||
"zh-cn": "忌：",
|
||||
"en": "Avoid:"
|
||||
},
|
||||
"fcfu7r4": {
|
||||
"zh-cn": "百度热搜",
|
||||
"en": "Baidu hot search"
|
||||
},
|
||||
"gt4f2": {
|
||||
"zh-cn": "必应",
|
||||
"en": "Bing"
|
||||
},
|
||||
"ofsl2": {
|
||||
"zh-cn": "谷歌",
|
||||
"en": "Google"
|
||||
},
|
||||
"koa02": {
|
||||
"zh-cn": "百度",
|
||||
"en": "Baidu"
|
||||
},
|
||||
"mjau2": {
|
||||
"zh-cn": "翻译",
|
||||
"en": "TRANSLATORS"
|
||||
},
|
||||
"3k2ak06": {
|
||||
"zh-cn": "探索世界吧！",
|
||||
"en": "Explore the world!"
|
||||
},
|
||||
"a1twd62u": {
|
||||
"zh-cn": "<n-button size=\"large\" round class=\"w-[15%] md:w-[30%]\" type=\"primary\" @click=\"toSearch\">搜索</n-button>",
|
||||
"en": "<n-button size=\"large\" round class=\"w-[15%] md:w-[30%]\" type=\"primary\" @click=\"toSearch\"> Search </n-button>"
|
||||
},
|
||||
"6hlzcui": {
|
||||
"zh-cn": "皖ICP备2021017362号-1",
|
||||
"en": "Anhui ICP prepared 2021017362-1"
|
||||
},
|
||||
"1jvk9i5": {
|
||||
"zh-cn": "api文档",
|
||||
"en": "api documentation"
|
||||
},
|
||||
"xnecsw5": {
|
||||
"zh-cn": "今日访问：",
|
||||
"en": "Visit Today:"
|
||||
},
|
||||
"cq5txs4": {
|
||||
"zh-cn": "总访问：",
|
||||
"en": "Total access:"
|
||||
},
|
||||
"azdpf64": {
|
||||
"zh-cn": "删除导航",
|
||||
"en": "Delete navigation"
|
||||
},
|
||||
"yxq5kqa": {
|
||||
"zh-cn": "该功能能需要登录账号",
|
||||
"en": "This function requires a login account"
|
||||
},
|
||||
"2xu7fsc": {
|
||||
"zh-cn": "未登录账号，是否去登录？",
|
||||
"en": "No login account, do you want to log in?"
|
||||
},
|
||||
"oxvu2": {
|
||||
"zh-cn": "返回",
|
||||
"en": "Back"
|
||||
},
|
||||
"ldxqau7": {
|
||||
"zh-cn": "请输入导航名称",
|
||||
"en": "Please enter a navigation name"
|
||||
},
|
||||
"ldmt1e7": {
|
||||
"zh-cn": "请输入导航链接",
|
||||
"en": "Please enter the navigation link"
|
||||
},
|
||||
"eslg2": {
|
||||
"zh-cn": "删除",
|
||||
"en": "delete"
|
||||
},
|
||||
"cz5bz19": {
|
||||
"zh-cn": "你确定删除此导航？",
|
||||
"en": "Are you sure to delete this navigation?"
|
||||
},
|
||||
"kzjg2": {
|
||||
"zh-cn": "确定",
|
||||
"en": "OK"
|
||||
},
|
||||
"ev022": {
|
||||
"zh-cn": "取消",
|
||||
"en": "Cancel"
|
||||
},
|
||||
"e8481q4": {
|
||||
"zh-cn": "添加菜单",
|
||||
"en": "Add menu"
|
||||
},
|
||||
"c55ak14": {
|
||||
"zh-cn": "导航名称",
|
||||
"en": "Navigation name"
|
||||
},
|
||||
"c5g7th4": {
|
||||
"zh-cn": "导航链接",
|
||||
"en": "Navigation link"
|
||||
},
|
||||
"fu6j474": {
|
||||
"zh-cn": "立即创建",
|
||||
"en": "Create now"
|
||||
},
|
||||
"oa5nl79": {
|
||||
"zh-cn": "图片名 | 分享人",
|
||||
"en": "The name of the photo is |"
|
||||
},
|
||||
"hpqe2": {
|
||||
"zh-cn": "搜索",
|
||||
"en": "search"
|
||||
},
|
||||
"n5d1": {
|
||||
"zh-cn": "由",
|
||||
"en": "by"
|
||||
},
|
||||
"edt12": {
|
||||
"zh-cn": "分享",
|
||||
"en": "Share"
|
||||
},
|
||||
"e28i2": {
|
||||
"zh-cn": "下载",
|
||||
"en": "Download"
|
||||
},
|
||||
"kr3b2": {
|
||||
"zh-cn": "目录",
|
||||
"en": "catalogue"
|
||||
},
|
||||
"12h2jb5": {
|
||||
"zh-cn": "--发表于",
|
||||
"en": "-- Published in"
|
||||
},
|
||||
"mj1545e": {
|
||||
"zh-cn": "YYYY年MM月DD日hh时",
|
||||
"en": "YYYY YYYY month MM day DD hh"
|
||||
},
|
||||
"p8hy2": {
|
||||
"zh-cn": "金价",
|
||||
"en": "Gold price"
|
||||
},
|
||||
"p2ppft9": {
|
||||
"zh-cn": "今日金价分析。。。",
|
||||
"en": "Today's gold price analysis..."
|
||||
},
|
||||
"e8mchx4": {
|
||||
"zh-cn": "汉语字典",
|
||||
"en": "Chinese dictionary"
|
||||
},
|
||||
"bz4ps7g": {
|
||||
"zh-cn": "汉语字典，初级版，期待升级。。。",
|
||||
"en": "Chinese dictionary, primary edition, looking forward to upgrade..."
|
||||
},
|
||||
"6drye27": {
|
||||
"zh-cn": "QQ号查手机号",
|
||||
"en": "QQ number check mobile phone number"
|
||||
},
|
||||
"drvlscc": {
|
||||
"zh-cn": "请勿乱用，打扰别人生活！",
|
||||
"en": "Please do not disturb others' lives!"
|
||||
},
|
||||
"t7odd27": {
|
||||
"zh-cn": "手机号查QQ号",
|
||||
"en": "Mobile phone number check QQ number"
|
||||
},
|
||||
"dxu9t3": {
|
||||
"zh-cn": "小工具",
|
||||
"en": "gadget"
|
||||
},
|
||||
"b73a9b4": {
|
||||
"zh-cn": "品种名称",
|
||||
"en": "Variety name"
|
||||
},
|
||||
"b7274w4": {
|
||||
"zh-cn": "品种代号",
|
||||
"en": "Breed code"
|
||||
},
|
||||
"cjpb4w4": {
|
||||
"zh-cn": "总成交量",
|
||||
"en": "Total trading volume"
|
||||
},
|
||||
"fkuh33": {
|
||||
"zh-cn": "最新价",
|
||||
"en": "Latest price"
|
||||
},
|
||||
"ehkwv3": {
|
||||
"zh-cn": "开盘价",
|
||||
"en": "At the opening"
|
||||
},
|
||||
"ftvz33": {
|
||||
"zh-cn": "最高价",
|
||||
"en": "The highest price"
|
||||
},
|
||||
"fh1ex3": {
|
||||
"zh-cn": "最低价",
|
||||
"en": "Bottom price"
|
||||
},
|
||||
"gqun53": {
|
||||
"zh-cn": "涨跌幅",
|
||||
"en": "Price limit"
|
||||
},
|
||||
"dh6lfs5": {
|
||||
"zh-cn": "昨日收盘价",
|
||||
"en": "Yesterday's closing price"
|
||||
},
|
||||
"devbay4": {
|
||||
"zh-cn": "更新时间",
|
||||
"en": "Update time"
|
||||
},
|
||||
"mpnd3": {
|
||||
"zh-cn": "<繁>",
|
||||
"en": "forte"
|
||||
},
|
||||
"duq72": {
|
||||
"zh-cn": "共 ",
|
||||
"en": "A total of"
|
||||
},
|
||||
"nx72": {
|
||||
"zh-cn": " 画",
|
||||
"en": "draw"
|
||||
},
|
||||
"2j782x5": {
|
||||
"zh-cn": "请输入汉字",
|
||||
"en": "Please enter Chinese characters"
|
||||
},
|
||||
"l9122": {
|
||||
"zh-cn": "确认",
|
||||
"en": "verify"
|
||||
},
|
||||
"3w5egsb": {
|
||||
"zh-cn": "汉字不存在或查询太快！",
|
||||
"en": "Kanji does not exist or query too fast!"
|
||||
},
|
||||
"7ji3y96": {
|
||||
"zh-cn": "请输入手机号",
|
||||
"en": "Please enter your phone number"
|
||||
},
|
||||
"1x2jn4": {
|
||||
"zh-cn": "QQ号：",
|
||||
"en": "QQ number:"
|
||||
},
|
||||
"usa2bc6": {
|
||||
"zh-cn": "手机号地区：",
|
||||
"en": "Mobile phone number Area:"
|
||||
},
|
||||
"br0cff": {
|
||||
"zh-cn": "该手机号不存在或未绑定QQ号！",
|
||||
"en": "The phone number does not exist or does not bind QQ number!"
|
||||
},
|
||||
"7ybk8i6": {
|
||||
"zh-cn": "请输入qq号",
|
||||
"en": "Please enter qq number"
|
||||
},
|
||||
"ctv6oi4": {
|
||||
"zh-cn": "手机号：",
|
||||
"en": "Mobile phone number:"
|
||||
},
|
||||
"n2hdmpf": {
|
||||
"zh-cn": "该qq号不存在或未绑定手机号！",
|
||||
"en": "The qq number does not exist or is not bound to the phone number!"
|
||||
},
|
||||
"2ensyc5": {
|
||||
"zh-cn": "请选择分类",
|
||||
"en": "Please select category"
|
||||
},
|
||||
"7grhuz6": {
|
||||
"zh-cn": "请输入用户名",
|
||||
"en": "Please enter your username"
|
||||
},
|
||||
"2j09685": {
|
||||
"zh-cn": "请输入链接",
|
||||
"en": "Please enter the link"
|
||||
},
|
||||
"pw132": {
|
||||
"zh-cn": "链接",
|
||||
"en": "link"
|
||||
},
|
||||
"2j7m1y5": {
|
||||
"zh-cn": "请输入标题",
|
||||
"en": "Please enter the title"
|
||||
},
|
||||
"2j8dli5": {
|
||||
"zh-cn": "请输入描述",
|
||||
"en": "Please enter a description"
|
||||
},
|
||||
"e7ygyc4": {
|
||||
"zh-cn": "添加成功",
|
||||
"en": "Add successfully"
|
||||
},
|
||||
"fonok3": {
|
||||
"zh-cn": "未登录",
|
||||
"en": "Not logged in"
|
||||
},
|
||||
"we76ar6": {
|
||||
"zh-cn": "需要登录吗？",
|
||||
"en": "Need to log in?"
|
||||
},
|
||||
"cu6np3": {
|
||||
"zh-cn": "去登录",
|
||||
"en": "Go and log in"
|
||||
},
|
||||
"dvuwv3": {
|
||||
"zh-cn": "就不去",
|
||||
"en": "Not go"
|
||||
},
|
||||
"cv25pi4": {
|
||||
"zh-cn": "我的友链",
|
||||
"en": "My friend chain"
|
||||
},
|
||||
"agnjjh4": {
|
||||
"zh-cn": "一键获取",
|
||||
"en": "One-click access"
|
||||
},
|
||||
"hmxge3": {
|
||||
"zh-cn": "用户名",
|
||||
"en": "username"
|
||||
},
|
||||
"3tl3ec5": {
|
||||
"zh-cn": "头像url",
|
||||
"en": "Avatar url"
|
||||
},
|
||||
"j7jc1j4": {
|
||||
"zh-cn": "链接地址",
|
||||
"en": "Link address"
|
||||
},
|
||||
"lnjk2": {
|
||||
"zh-cn": "类型",
|
||||
"en": "type"
|
||||
},
|
||||
"ij5d2": {
|
||||
"zh-cn": "标题",
|
||||
"en": "title"
|
||||
},
|
||||
"hrlt2": {
|
||||
"zh-cn": "描述",
|
||||
"en": "Description"
|
||||
},
|
||||
"heqc2": {
|
||||
"zh-cn": "提交",
|
||||
"en": "submit"
|
||||
},
|
||||
"gpe1004": {
|
||||
"zh-cn": "联系作者",
|
||||
"en": "Contact author"
|
||||
},
|
||||
"jsz7x46": {
|
||||
"zh-cn": "@ 黑心柚子",
|
||||
"en": "@Black pomelo"
|
||||
},
|
||||
"sfqndmd": {
|
||||
"zh-cn": "qq群 698612437",
|
||||
"en": "qq group 698612437"
|
||||
}
|
||||
}
|
||||
@ -60,6 +60,7 @@
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.22",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"vite": "^3.0.4"
|
||||
"vite": "^3.0.4",
|
||||
"vite-auto-i18n-plugin": "^1.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
124
src/components/drag.vue
Normal file
124
src/components/drag.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="sort-container flex">
|
||||
<div v-for="(item, index) in items" :key="item.id" class="sort-item" draggable="true"
|
||||
@dragstart="handleDragStart($event, index)" @dragover.prevent="handleDragOver($event, index)"
|
||||
@dragend="handleDragEnd" @touchstart="handleTouchStart($event, index)" @touchmove.prevent="handleTouchMove"
|
||||
@touchend="handleTouchEnd" :class="{ 'sorting': currentIndex === index }">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:items'])
|
||||
|
||||
// 响应式状态
|
||||
const currentIndex = ref(null)
|
||||
const dragStartIndex = ref(-1)
|
||||
const touchState = reactive({
|
||||
startY: 0,
|
||||
dragging: false,
|
||||
originIndex: -1
|
||||
})
|
||||
|
||||
// 处理拖拽开始
|
||||
const handleDragStart = (e, index) => {
|
||||
currentIndex.value = index
|
||||
dragStartIndex.value = index
|
||||
e.dataTransfer.setData('text/plain', '')
|
||||
}
|
||||
|
||||
// 处理拖拽经过
|
||||
const handleDragOver = (e, index) => {
|
||||
e.preventDefault()
|
||||
if (currentIndex.value === null || currentIndex.value === index) return
|
||||
|
||||
const newItems = [...props.items]
|
||||
const movedItem = newItems.splice(currentIndex.value, 1)[0]
|
||||
newItems.splice(index, 0, movedItem)
|
||||
|
||||
currentIndex.value = index
|
||||
emit('update:items', newItems)
|
||||
}
|
||||
|
||||
// 处理拖拽结束
|
||||
const handleDragEnd = () => {
|
||||
currentIndex.value = null
|
||||
dragStartIndex.value = -1
|
||||
}
|
||||
|
||||
// 触摸事件处理
|
||||
const handleTouchStart = (e, index) => {
|
||||
touchState.startY = e.touches[0].clientY
|
||||
touchState.dragging = true
|
||||
touchState.originIndex = index
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
if (!touchState.dragging) return
|
||||
|
||||
const touch = e.touches[0]
|
||||
const container = e.currentTarget
|
||||
const items = container.children
|
||||
const itemHeight = items[0].clientHeight
|
||||
|
||||
const deltaY = touch.clientY - touchState.startY
|
||||
const newIndex = Math.round(deltaY / itemHeight) + touchState.originIndex
|
||||
|
||||
if (newIndex >= 0 && newIndex < items.length && newIndex !== currentIndex.value) {
|
||||
const newItems = [...props.items]
|
||||
const movedItem = newItems.splice(touchState.originIndex, 1)[0]
|
||||
newItems.splice(newIndex, 0, movedItem)
|
||||
|
||||
currentIndex.value = newIndex
|
||||
emit('update:items', newItems)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
touchState.dragging = false
|
||||
currentIndex.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sort-container {
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
gap: 8px;
|
||||
/* max-width: 300px; */
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.sort-item {
|
||||
padding: 12px;
|
||||
background: #409eff;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
transition: transform 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sort-item.sorting {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.sort-item:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,6 @@
|
||||
import { createPinia } from "pinia";
|
||||
import { createApp } from "vue";
|
||||
// import '../lang/index';
|
||||
|
||||
import http from '@/api/index.js';
|
||||
import icon from "@/icon/index.js";
|
||||
@ -15,7 +16,7 @@ import router from "./router/guard.js";
|
||||
import { formatTimeBydate } from './util/index.js';
|
||||
|
||||
|
||||
|
||||
// window.localStorage.setItem('lang', 'en') // 你在 targetLangList 参数中传入的字符串，如 'en'
|
||||
Date.prototype.format = formatTimeBydate
|
||||
const app = createApp(App);
|
||||
|
||||
|
||||
39
src/views/home/navTest.vue
Normal file
39
src/views/home/navTest.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<drag v-model:items="data" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//mark import
|
||||
import drag from '@/components/drag.vue';
|
||||
|
||||
//mark data
|
||||
const data = ref([
|
||||
{
|
||||
id:1,
|
||||
content:"a"+1
|
||||
},{
|
||||
id:2,
|
||||
content:"a"+2
|
||||
},{
|
||||
id:3,
|
||||
content:"a"+3
|
||||
},{
|
||||
id:4,
|
||||
content:"a"+4
|
||||
},{
|
||||
id:5,
|
||||
content:"a"+5
|
||||
},
|
||||
])
|
||||
//mark method
|
||||
|
||||
//mark 周期、内置函数等
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -94,7 +94,7 @@ import { onMounted, ref } from 'vue';
|
||||
|
||||
|
||||
//mark data
|
||||
const jqs = ['立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至', '小寒', '大寒']
|
||||
// const jqs = ['立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至', '小寒', '大寒']
|
||||
const time = ref(formatTime(new Date(), 'hh:mm:ss'))
|
||||
const date = ref(formatTime(new Date(), 'YYYY 年 MM 月 DD 日'))
|
||||
|
||||
@ -109,8 +109,9 @@ const jqImg = ref('#')
|
||||
const jq = await $http.wea.getJq()
|
||||
console.log("*************",jq);
|
||||
const j = jq.data.solarTerms.slice(0, 2)
|
||||
const jNum = jqs.indexOf(j) + 1
|
||||
jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
|
||||
// const jNum = jqs.indexOf(j) + 1
|
||||
// jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
|
||||
jqImg.value = 'https://www.hxyouzi.com/img/jq/' + j + '.png'
|
||||
// const isBaidu = ref(true);
|
||||
const baidu = ref({})
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ import { defineConfig } from "vite";
|
||||
import AutoImport from "unplugin-auto-import/vite";
|
||||
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
|
||||
import Components from "unplugin-vue-components/vite";
|
||||
// import vitePluginAutoI18n, { YoudaoTranslator } from 'vite-auto-i18n-plugin';
|
||||
import svgLoader from "vite-svg-loader";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
@ -24,6 +25,13 @@ export default defineConfig({
|
||||
Components({
|
||||
resolvers: [NaiveUiResolver()],
|
||||
}),
|
||||
// vitePluginAutoI18n({
|
||||
// targetLangList: ['en'],
|
||||
// translator: new YoudaoTranslator({
|
||||
// appId: '203eecca921f0cc3',
|
||||
// appKey: 't01UW7iRpCLJmyEy3SSWH2efp4htdkAg'
|
||||
// })
|
||||
// })
|
||||
],
|
||||
esbuild: {
|
||||
pure: ['console.log'], // 删除 console.log
|
||||
|
||||
Loading…
Reference in New Issue
Block a user