hss-snippets-code v1.0.59

A collection of code snippets based on the hydee component library

Snippets

Public components

Prefix	Components Snippet Content	Description
h-affix	HAffix	固钉
h-alert	HAlert	警告提示
h-anchor	HAnchor	锚点
h-anchor-link	HAnchorLink	锚点连接
h-backtop	HBacktop	回到顶部
h-badge	HBadge	标记
h-button	HButton	按钮
h-empty	HEmpty	走马灯
h-cascader	HCascader	级联选择
h-cascader-panel	HCascaderPanel	级联选择面板
h-checkbox	HCheckbox	复选框
h-Collapse	HCollapse	折叠面板
h-CollapseItem	HCollapseItem	折叠面板Item
h-date-picker	HDatePicker	日期选择器
h-date-time-picker	HDateTimePicker	日期时间选择器
h-description	HDescription	描述列表
h-description.item	HDescriptionItem	描述列表项
h-divider	HDivider	分割线
h-drawer	HDrawer	抽屉
h-dropdown	HDropdown	下拉菜单
h-dropdown-item	HDropdownItem	下拉菜单列
h-empty	HEmpty	空数据
h-form	HForm	表单
h-form-item	HFormItem	表单项
h-row	HRow	栅格
h-col	HCol	栅格
h-icon	HIcon	图标
h-image	HImage	图片
h-image-groups	HImageGroups	图片组
h-input	HInput	输入框
h-input-number	HInputNumber	数字输入框
h-input-textarea	HInputTextarea	文本域
h-input-interval	HInputInterval	区间输入框
h-loading	HLoading	加载中
h-message	HMessage	消息提示
h-modal	HModal	对话框
h-notification	HNotification	通知
h-pageHead	HPageHead	页面标题栏
h-pagination	HPagination	分页器
h-popover	HPopover	气泡卡片
h-progress	HProgress	进度条
h-radio	HRadio	单选框
h-scrollbar	HScrollbar	滚动条
h-scroller	HScroller	滚动条
h-select	HSelect	下拉选择器
h-option-group	HOptionGroup	分组下拉选择器
h-option	HOption	选项
h-statistic	HStatistic	统计
h-statistic-number	HStatisticNumber	统计数字
h-statistic-count-down	HStatisticCountDown	统计倒计时
h-statistic-rate	HStatisticRate	统计比值
h-steps	HSteps	步骤条
h-step	HStep	步骤条列
h-switch	HSwitch	开关
h-table	HTable	表格
h-table-column	HTableColumn	表格
h-tabs	HTabs	标签页
h-tab-pane	HTabPane	标签页面板
h-tag	HTag	标签
h-time-picker	HTimePicker	时间选择器
h-time-picker	HTimePicker	时间选择器选项
h-time-picker	HTimePicker	时间选择器时间选项
h-time24-picker	HTime24Picker	时间24h选择器
h-timeline	HTimeline	时间轴
h-timeline-item	HTimelineItem	时间轴列
h-tooltip	HTooltip	提示
h-v-tooltip	HVTooltip	指令提示
h-tour	HTour	漫游式引导
h-tree	HTree	树形控件
h-virtual-list	HVirtualList	虚拟列表
h-virtual-scroll	HVirtualScroll	虚拟表格
h-virtual-column	HVirtualColumn	虚拟表格列
h-watermark	HWatermark	水印

Business Components

...

Custom Fragments

【go】hss-go-printin

package main
 
import "fmt"
 
func main() {
		fmt.Println("Hello, World!")
}

【python】hss-py-get

import requests
response = requests.get('https://www.example.com')
print(response.text)

【vue】hss-vue2-base

<template>
	<div :class="classes">
		
	</div>
</template>

<script>
	const prefixCls = 'vi--container';
	export default {
		name: 'vi--container',
		data() {
			return {};
		},
		props: {},
		methods: {},
		watch: {},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
		computed: {
			classes() {
				return [`prefixCls`];
			}
		},
		components: {}
	};
</script>

<style lang="scss" scoped>
	$-prefix-cls: 'vi--container';
		.#{$-prefix-cls} {
			
		}
</style>

【vue】hss-vue3-base-setup

<template>
	<div>

	</div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

【vue】hss-vue3-base-ts-setup

<template>
	<div>

	</div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

【javascript】hss-service-base

const vue = new Vue();
const { io, serverAlias, apiVersion } = global;
/**
* ${0}
*/
class ${1:name}Service {

	queryData(payload) {
		return new Promise((resolve, reject) => {
			io.post(`${serverAlias.merManager}/${apiVersion}/`, payload,
			(res) => {
				resolve(res.data); 
			}
			(e) => {
				vue.$hmessage.error({ message: e.msg });
				reject(e); 
			}
			{ emulateJSON: false, merCode: true }
			);
		});
	}

}
export default new ${1:name}Service();

【javascript】hss-router-base

/**
 * ${0}
 * 请注意，路由文件要记得在index.js注册
 */
export default [
	{
		path: '/${1:name}', // 短横线分隔规范
		name: '${1:name}', // 短横线分隔规范
		component: () => import('@/views/${2:url}'),
		meta: {
			title: '你的页面标题',
			auth: '你的菜单权限, 不设置权限可以默认为true',
			activeMenu: '左侧菜单映射关系的route-path'
		}, // 有下层路由，按下层结构规范
		children: [
			{
				path: '/${1:name}',
				name: '${1:name}',
				component: () => import('@/views/${2:url}'),
				meta: {
					title: '你的页面标题',
					auth: '你的菜单权限, 不设置权限可以 默认为true',
					activeMenu: '左侧菜单映射关系的route-path',
					isGreyBackground: false, // 是否为灰色背景 默认false
					isClearContentSpace: false, // 内容区是否显示间距 默认false
					isWatermark: false, // 是否加水印 默认false
					isCurrentTabOpen: false, // 是否为当前tab打开 默认false
					isAddBreadcrumb: true, // 是否添加到顶部 默认true
					mergeCode: '', // 面包屑导航出现多个高亮的临时解决方案，设置一个唯一标识
					isTitleBar: true, // 内容区标题 默认true
					isTitleGoBack: false // 内容去标题带返回 默认false
				}
			}
		]
	}
];

【javascript】hss-vuex-base

/**
* ${0}
*/

const state = { }

const mutations = { }

const actions = { }

export default {
	namespaced: true,
	state,
	mutations,
	actions
}

【scss】h-font-family

var(--h-font-family)

【scss】h-font-weight-bold

var(--h-font-weight-bold)

【scss】h-border-size

var(--h-border-size)

【scss】h-border-hover-size

var(--h-border-hover-size)

【scss】h-border-style

var(--h-border-style)

【scss】h-border-radius-4

var(--h-border-radius-4)

【scss】h-border-radius-8

var(--h-border-radius-8)

【scss】h-border-radius-12

var(--h-border-radius-12)

【scss】h-border-radius-20

var(--h-border-radius-20)

【scss】h-border-radius-circle

var(--h-border-radius-circle)

【scss】h-margin-4

var(--h-margin-4)

【scss】h-margin-8

var(--h-margin-8)

【scss】h-margin-12

var(--h-margin-12)

【scss】h-margin-16

var(--h-margin-16)

【scss】h-margin-20

var(--h-margin-20)

【scss】h-margin-24

var(--h-margin-24)

【scss】h-margin-40

var(--h-margin-40)

【scss】h-padding-8

var(--h-padding-8)

【scss】h-padding-8-0

var(--h-padding-8-0)

【scss】h-padding-0-8

var(--h-padding-0-8)

【scss】h-padding-12

var(--h-padding-12)

【scss】h-padding-12-0

var(--h-padding-12-0)

【scss】h-padding-0-12

var(--h-padding-0-12)

【scss】h-padding-20

var(--h-padding-20)

【scss】h-padding-20-0

var(--h-padding-20-0)

【scss】h-padding-0-20

var(--h-padding-0-20)

【scss】h-font-h1

var(--h-font-h1)

【scss】h-font-h1-bold

var(--h-font-h1-bold)

【scss】h-font-h2

var(--h-font-h2)

【scss】h-font-h2-bold

var(--h-font-h2-bold)

【scss】h-font-h3

var(--h-font-h3)

【scss】h-font-h3-bold

var(--h-font-h3-bold)

【scss】h-font-h4

var(--h-font-h4)

【scss】h-font-h4-bold

var(--h-font-h4-bold)

【scss】h-font-text

var(--h-font-text)

【scss】h-font-text-bold

var(--h-font-text-bold)

【scss】h-primary-brand-color

var(--h-primary-brand-color)

【scss】h-primary-s90

var(--h-primary-s90)

【scss】h-primary-s70

var(--h-primary-s70)

【scss】h-primary-s60

var(--h-primary-s60)

【scss】h-primary-s40

var(--h-primary-s40)

【scss】h-primary-s30

var(--h-primary-s30)

【scss】h-primary-s20

var(--h-primary-s20)

【scss】h-primary-s10

var(--h-primary-s10)

【scss】h-primary-s5

var(--h-primary-s5)

【scss】h-primary-b100

var(--h-primary-b100)

【scss】h-primary-b90

var(--h-primary-b90)

【scss】h-primary-b70

var(--h-primary-b70)

【scss】h-primary-b60

var(--h-primary-b60)

【scss】h-primary-b50

var(--h-primary-b50)

【scss】h-primary-b40

var(--h-primary-b40)

【scss】h-primary-success-color

var(--h-primary-success-color)

【scss】h-green-s70

var(--h-green-s70)

【scss】h-green-s60

var(--h-green-s60)

【scss】h-green-s50

var(--h-green-s50)

【scss】h-green-s40

var(--h-green-s40)

【scss】h-green-s30

var(--h-green-s30)

【scss】h-green-s20

var(--h-green-s20)

【scss】h-green-s10

var(--h-green-s10)

【scss】h-green-s5

var(--h-green-s5)

【scss】h-primary-warning-color

var(--h-primary-warning-color)

【scss】h-orange-s70

var(--h-orange-s70)

【scss】h-orange-s60

var(--h-orange-s60)

【scss】h-orange-s50

var(--h-orange-s50)

【scss】h-orange-s40

var(--h-orange-s40)

【scss】h-orange-s30

var(--h-orange-s30)

【scss】h-orange-s20

var(--h-orange-s20)

【scss】h-orange-s10

var(--h-orange-s10)

【scss】h-orange-s5

var(--h-orange-s5)

【scss】h-primary-danger-color

var(--h-primary-danger-color)

【scss】h-red-s70

var(--h-red-s70)

【scss】h-red-s60

var(--h-red-s60)

【scss】h-red-s50

var(--h-red-s50)

【scss】h-red-s40

var(--h-red-s40)

【scss】h-red-s30

var(--h-red-s30)

【scss】h-red-s20

var(--h-red-s20)

【scss】h-red-s10

var(--h-red-s10)

【scss】h-red-5

var(--h-red-5)

【scss】h-text-main-default-color

var(--h-text-main-default-color)

【scss】h-text-basis-default-color

var(--h-text-basis-default-color)

【scss】h-text-aider-default-color

var(--h-text-aider-default-color)

【scss】h-text-placeholder-default-color

var(--h-text-placeholder-default-color)

【scss】h-text-disable-color

var(--h-text-disable-color)

【scss】h-color-background

var(--h-color-background)

【scss】h-color-white

var(--h-color-white)

【scss】h-color-mark

var(--h-color-mark)

【scss】h-color-streak

var(--h-color-streak)

【scss】h-boder-default-color

var(--h-boder-default-color)

【scss】h-boder-default-color-hover

var(--h-boder-default-color-hover)

【scss】h-border

var(--h-border)

【scss】h-border-hover

var(--h-border-hover)

【scss】h-shadow

var(--h-shadow)

【scss】h-shadow-modal

var(--h-shadow-modal)

Other commonly used

...

Supported languages

go(.go)
python(.py)
vue(.vue)
javascript(.js)
scss(.scss)

Question

...

hss-snippets-code

hydeesoft